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配置导入