webpack 應用筆記

1.https://segmentfault.com/a/1190000006178770 

 

2. 組件介紹

01.webpack.prod.conf.js　　

　　在生產時 new webpack.optimize.CommonsChunkPlugin 對打包生成的app.js 進行分割

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // 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',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

　　02.sourceMap的配置 ,根據不一樣環境配置


　　

可選值
source-map 【用於生產環境】
eval-source-map
eval-cheap-module-source-map
eval-cheap-source-map
eval 【建議開發環境用這個】

eg:
    devtool: 'cheap-module-eval-source-map', dev
    devtool: '#source-map', prod
　　 devtool： false 關閉 map

 

補充　　

 3.多頁面問題

 4.dev配置

 　　關於webpack dev server:
 　　配置項 assetsSubDirectory: 'dev_static',這裏配置的是內存虛擬目錄, 實際本目錄內部文件不會生效
 　　虛擬內存內的文件由new CopyWebpackPlugin配置導入