[轉] 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.js consol.log('123');

 

而後編譯一下會出現以下圖 
 

webpack-dev-server

npm install webpack-dev-server

// package.json中script添加 "devServer": "webpack-dev-server --inline", //webpack.config.js const devServer = require('webpack-dev-server') //module devServer: { 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.js console.log('1234567'); //index.js和extract.js中增長 require('./console.js');

npm run webpack以後發如今common.js中有console.log(‘1234567’);而其餘的index.js和extract.js就沒有了，這樣使得代碼重用性更高，而且節省了文件更變時的帶寬，還能夠將多個地方要用的js打經常使用的包