前端臨牀手札——webpack構建逐步解構（下）

續 前端臨牀手札——webpack構建逐步解構（上）

工做流程

案例：multiple-page-vue-webpack-example

最近添加了雪碧圖功能，並把sass-loader替換成postcss的press，詳細能夠看分支develop

構建生產

上一篇說完了本地測試webpack和express是如何工做，接下來分析構建生產模式下webpack配置如何配置和每一個模塊幹了什麼。

從流程能看到，這裏用到兩個模塊build.js和webpack。當你進入build.js文件能看到沒幹什麼，其實這裏能夠理解爲構建生產代碼前的預處理部分（刪除已構建的文件、拷貝靜態資源相關的操做等），實際工做仍是webpack完成的。

所以接下來講明的內容就剩下webpack配置了，打開webpack.prod.conf.js能看到前面設置也沒什麼大變化，可是添加的plugins卻有點不一樣。

webpackConfig.plugins = [].concat(webpackConfig.plugins, utils.htmlLoaders(config.template, webpackConfig.entry), [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    // new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash:5].css')),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      // TODO: set node_modules fallback
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })
])

utils.htmlLoaders()上一篇說過了是多入口頁面的設置，剩下的分別有：

• webpack.optimize.UglifyJsPlugin()

• webpack.optimize.OccurrenceOrderPlugin()

• ExtractTextPlugin()

• webpack.optimize.CommonsChunkPlugin()

接下來一個個講解，首先是webpack.optimize.UglifyJsPlugin

webpack.optimize.UglifyJsPlugin

從名字能看出他是負責壓縮處理js的，其餘沒啥好說的細節請看官方說明

webpack.optimize.OccurrenceOrderPlugin

這個看官方文檔說明感受是個處理分包的機制的插件，然而也沒啥好說的了。

ExtractTextPlugin

這個插件用來合併css文件，除了最後壓縮調用外，前面在全部輸出css的配置也得使用上ExtractTextPlugin.extract()來提早提取css配置。因爲封裝到utils.js的cssLoaders方法下，這裏代碼並無體現出來。

webpack.optimize.CommonsChunkPlugin

這個得重點說一說，webpack厲害之處在於他分包的科學計算法的體現就是這個插件，能智能地幫你把代碼拆分紅多個包而已加載時並沒依賴缺失，下面講解配置，你也能夠看官方文檔

使用

new webpack.optimize.CommonsChunkPlugin(options)

配置說明

• options.name 合併或拆分後的名字，多用於設置。

• options.filename 這個固然是指生成出來的文件名字

• options.chunks 指定js代碼塊來進行處理，默認使用的是入口文件及其依賴

• options.children 這個具體有什麼用博主還真沒搞懂

• options.async 設置爲true，就能夠建立一個異步請求的代碼塊

• options.minSize 建立一個公共塊以前的模塊的最小尺寸，意思就是小於這個大小的塊並不會合併

• options.minChunks 最小分割成多少個代碼塊，設置爲Infinity就不會進行合併代碼。除此以外還能夠設置方法，本身寫合併規則，想案例就是這樣處理的。

從案例分析，每一個CommonsChunkPlugin將會是生成一個代碼塊，下面這段是生成一個入口公共塊，同時必須在html-webpack-plugin的依賴添加上（參考文檔utils.js）

webpack.prod.conf.js

new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

utils.js

Object.keys(pages).forEach(function(pathname) {
    let conf = {
      filename: path.normalize(pages[pathname][0].replace(template.replace(/\*\*.*$/,''),'')), //生成的html存放路徑，相對於path
      template: pages[pathname][0], //html模板路徑
      inject: false, //js插入的位置，true/'head'/'body'/false
    };
    if (pathname in webpackEntry) {
      conf.inject = 'body';
      conf.chunks = ['manifest','vendor', pathname];
      conf.hash = true;
      conf.chunksSortMode='dependency';
    }
    plugins.push(new HtmlWebpackPlugin(conf));
});

而下面這段，則是將node_modules目錄下任何所需的模塊提取到vendor.js

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  // TODO: set node_modules fallback
  minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
})

最後

到這裏估計對webpack配置的比較迷惑的同窗已經清晰了多少，然而這篇並非從頭幫你解析webpack全部配置的文章，內容和標題貨不對板有點抱歉，卻仍是但願不懂的人本身多看官方文檔，官方文檔不少時候已經說得比較清楚。我本身也是常常使用一些插件時懵逼了去google找其餘人使用的幫助，然而半天沒找到比較靠譜的方法，最後仍是反覆啃官方文檔或者看源碼解決的。因此或許這篇文章不能真正解決你的疑惑，希望能很好地教會你看官方文檔;)。

而後在寫完這篇文章後，發現webpack仍是有些功能須要gulp補充的，好比css的壓縮、圖片的處理（雪碧圖、svg等），但願最近能有空補上這塊內容吧！