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打常用的包

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