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-mapeval-cheap-module-source-mapeval-cheap-source-mapeval 【建议开发环境用这个】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配置导入