升級 webpack4 變化之處

1、 伸手黨

webpack4基本配置

2、具體變化
1.webpack4 並引入了mode概念，爲開發，及生產環境提供兩種不一樣的默認配置，極大的簡化了webpack的配置。
在4.0版本中，你甚至不須要配置，便可使用(雖然沒什麼用)。

默認值

module.exports = {
  entry: 'src/',
  outpu: {
    filename: '[name].js',
    path: 'dist/'
  }
}

webpack 4中引入的mode是必需設置的（若是沒有設置，會報警），你能夠經過webpack --mode ...來設置，也能夠經過webpack.config.js來設置。

module.exports = {
  mode: 'development' // development || production
}

mode也是爲了簡化配置項，不一樣的mode會爲咱們設置不一樣的默認配置，就不須要咱們一個個去分別配置了。

開發模式更關注開發體驗：

• 更利於瀏覽器調試
• 更快的增量編譯速度
• 更詳細的報錯消息

生成模式更關注用戶體驗：

性能（文件大小，運行性能，打包速度）詳細性能描述參考

1. loader變化比較小，loader升級到最新版均可以直接用，有些甚至不用升級。

3.plugin

(1) extract-text-webpack-plugin@4.0.0-beta.0

issue list 能夠看到，問題仍是比較多的。

官方出了一個mini-css-extract-plugin，可是這個問題更多，不支持HMR，不支持contenthash，因此目前基本無法用。

(2)html-webpack-plugin@3.0.0+

這個插件目前是支持webpack 4的，只是他本身的插件不必定支持，這個在升級的時候須要注意

(3)uglifyjs-webpack-plugin

這個插件目前也是支持webpack 4的。其實在production模式下，代碼是默認會壓縮的。固然，若是你有更細緻的自定義需求，就能夠用到這個插件。

(4) CommonsChunkPlugin

上面講到的都是一些第三方的插件改動，而改動最大，影響也最大的就是webpack 4使用optimization.splitChunks替代了CommonsChunkPlugin，而且支持移除了CommonsChunkPlugin，因此這部分遷移起來比較麻煩。

對於各位配置工程師來講，CommonsChunkPlugin應該是很熟悉了，咱們主要用他來抽取代碼中的共用部分，webpack runtime之類的代碼，結合chunkhash，實現最好的緩存策略。而這一部分，也是webpack支持的比較差的，這個幾乎三歲的issue，至今尚未解決。對這個問題比較感興趣的，能夠拜讀一下這篇 文章。我這裏就不展開了，直接貼一份CommonsChunkPlugin時代解決這個問題的配置

module.exports = {
  ...
  plugins: [
    ...
    new webpack.HashedModuleIdsPlugin(),

    new webpack.NamedChunksPlugin(chunk => {
      if (chunk.name) {
        return chunk.name
      } else {
        return 'faceless-chunk' // a chunk has no name
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          /node_modules/.test(module.resource)
        )
      }
    }),

    // 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: 'runtime',
      minChunks: Infinity
    }),

    // extracts shared chunks from code splitted chunks
    // https://github.com/webpack/webpack/issues/4392
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'async-vendor',
      children: true,
      minChunks: 3
    })

  ]
}

升級到webpack 4後的配置

module.exports = {
  ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendors',
        },
        'async-vendors': {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          name: 'async-vendors'
        }
      }
    },
    runtimeChunk: { name: 'runtime' }
  },
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.NamedChunksPlugin(chunk => chunk.name || 'faceless-chunk'), // a chunk has no name!!!
    ...
  ]
}

完整配置