Webpack4.0各個擊破（10）integration篇

首先咱們要消除一個常見的誤解，webpack是一個模塊打包工具(module bundler)，它不是一個任務執行工具，任務執行器是用來自動化處理開發中常見任務的，例如檢查(lint)，構建(build)，測試(test)等。相對於打包器，任務執行器所面對的邏輯問題更爲上層，你可使用上層的工具來管理整個持續集成（CI），而把打包的部分交給webpack。

一. 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篇來源：博客園著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。