[转] webpack3最新版本配置研究（五） devtool，webpack-dev-server，CommonsChunkPlugin

devtool

devtool是webpack中config自带的属性只要使用就可以了不用安装 
webpack官网的解释如下 
当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。 

//webpack.config.js//在entry上面添加一个官方推荐的devtool:对于开发环境eval-source-map - 每个模块使用 eval() 执行，并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。初始化 SourceMap 时比较慢，但是会在重构建时提供很快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。//添加属性module.exports = { ?devtool: ‘eval-source-map‘}//注释掉压缩插件// new webpack.optimize.UglifyJsPlugin({// ??compress: {// ????warnings: false,// ??},// ??output: {// ????comments: false,// ??}// }),//测试下报错信息，测完了删除// index.jsconsol.log(‘123‘);

然后编译一下会出现如下图 
 

webpack-dev-server

npm install webpack-dev-server

// package.json中script添加 "devServer": "webpack-dev-server --inline",//webpack.config.jsconst devServer = require(‘webpack-dev-server‘)//moduledevServer: { ???historyApiFallback:true, ???inline:true, ???contentBase: path.join(__dirname, "public"), ???compress: true, ???port: 9000 ?} //plugin增加 new webpack.HotModuleReplacementPlugin()

然后运行npm run derServer可以在localhost：9000/index.html看效果，使用这个的时候不会再生成public文件夹，所有的代码都会放在内存中！

CommonsChunkPlugin

CommonsChunkPlugin是webpack中自带的插件直接使用即可 
commonsChunkPlugin

//webpack.config.js// 提供公共代码，plugins添加// 默认会把所有入口节点的公共代码提取出来,生成一个common.js//new webpack.optimize.CommonsChunkPlugin(‘common.js‘)// 只提取index节点和extract节点//new webpack.optimize.CommonsChunkPlugin(‘common.js‘,[‘index‘,‘extract‘])//这里我们使用new webpack.optimize.CommonsChunkPlugin({ ??name: "common", ??minChunks:2 ?// 最少两个入口文件js同时引用时打包})//将webpack.config.js中用来push到plugins的程序修改下，加上push(‘common‘);const htmlArray = [‘index‘,‘extract‘];htmlArray.forEach((element) => { ?const chunksArray = [element]; ?if (element === ‘index‘) { ???chunksArray.push(‘entry‘); ?} ?chunksArray.push(‘common‘); ??// 公共代码打出来的包也被认为是个chunks所以可以在这里push引入 ?const newPlugin = new HtmlWebpackPlugin({ ???filename: element + ‘.html‘, ???template: element + ‘.html‘, ??// 获取最初的html末班 ???inject: ?‘body‘, ?????????// - ???hash: true, ??????????????// 在生成的文件后面增加一个hash，防止缓存 ???chunks: chunksArray ?}); ?module.exports.plugins.push(newPlugin);});//新文件console.jsconsole.log(‘1234567‘);//index.js和extract.js中增加require(‘./console.js‘);

npm run webpack之后发现在common.js中有console.log(‘1234567’);而其他的index.js和extract.js就没有了，这样使得代码重用性更高，并且节省了文件更变时的带宽，还可以将多个地方要用的js打常用的包