一. Integration
下文摘自webpack中文網：
首先我們要消除一個常見的誤解，
webpack是一個模塊打包工具(module bundler)，它不是一個任務執行工具，任務執行器是用來自動化處理開發中常見任務的，例如檢查(lint)，構建(build)，測驗(test)等，相對于打包器，任務執行器所面對的邏輯問題更為上層，你可以使用上層的工具來管理整個持續集成（CI），而把打包的部分交給webpack，
webpack在工具鏈中的角色定位是非常清晰的，那么為了與其他流程進行合作，就需要使用任務管理工具來啟動webpack，本文介紹兩種常見的方法，
1. 使用Node-API
webpak暴露了一些方法，使得開發者可以通過呼叫他們而在腳本中啟動webpack，使用的方法較為簡單:
//webpack-node.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.html.js');
const cowsay = require('cowsay');
const compiler = webpack(webpackConfig);
compiler.run((err, stats)=>{
if (!err) {
console.log(stats.toJson().assets);
console.log(cowsay.say({text:'Congratulations!'}));
}
});
運行結果：
這里解釋一下上面代碼的基本邏輯，引入了webpack模塊以及webpack.config.html.js的組態檔(從這里就很容易理解為什么webpack的組態檔可以匯出為一個函式或多個配置，它實際上也是作為一個模塊參與到整個運行程序的)，通過呼叫webpack([Object config])方法得到一個compiler實體，呼叫compiler.run方法就啟動了webpack的構建功能，run方法的回呼函式中如果有運行錯誤，可以通過err來獲取，與構建程序有關的資訊都掛載在stats物件（例如stats，toJson().assets)，這樣便實作了以非命令列的方式啟動webpack，
2.使用gulp
gulp是基于流的任務管理工具，實際上webpack的細分功能使用gulp也可以做到，而且很多功能型插件都會提供針對grunt,gulp和webpack等不同工具的集成方式，gulp的確更適合做宏觀意義上的任務流管理，還是那句老話，工具是提供便利的，而不是提供束縛的，官方檔案也提供了如下代碼示例：
//gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default',function(){
return gulp.src('src/entry.js')
.pipe(webpack({
//...configs
})).pipe(gulp.dest('dist/'));
})
二. after webpack
至此，webpack已經被集成進了自動化工具鏈，開發者可以按自己的需求來定制構建以后需要執行的任務，但webpack的使命還沒有結束，構建的結束距離用戶能夠訪問站點和使用功能還需要非常多的作業要做，有很多問題并不是在構建中出現的，但是卻需要在構建時加以處理，這個時候開發者又需要回過頭來為webpack增加配置，
例如很多開發者最初不理解構建程序中為什么要使用hash,chunkhash等占位符來把檔案名變得丑陋無比，直到不同版本的產品上線時出現不強制重繪頁面就無法訪問新資源的問題時，才會開始關注版本更新和快取策略的問題，然后才會理解為了標記版本而啟用hash，為了避免重復構建而使用chunkhash,為了減小體積而使用tree-shaking等等，
三. 鳴謝
webpack 系列文章結束了，在這里感謝大家的閱覽和支持，如果您覺得我的分享對您有幫助，您可以持續關注，我將會繼續給大家分享計算機科學方面文章，您如果對什么知識感興趣或者有疑問，請您留言說明，我會挑一些典型的具體講解和分享，感謝大家！
作者：大史不說話
鏈接：Webpack4.0各個擊破（10）integration篇
來源：博客園
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/246800.html
標籤：JavaScript
上一篇：JavaScript、jQuery函式呼叫時加括號（）和不加括號的區別
下一篇：用js寫一個簡易計算器