大转转FE

webpack4升级指南

鉴于图书项目编译速度极慢的情况（项目里面module太多了，编译慢很正常)且最近需求不多（很少出现的空挡期）。所以我觉得搞一波webpack升级,看看有没有帮助。webpack于2018年2月25正式发布v4.0.0版本，代号legato。名字是不是很大器，不明觉厉的样子。废话少说下面正式进入主题。(本文的升级配置主要针对vue项目)

一、webpack4更新变化

先说一下webpack4有几个比较重要的更新：webpack4更新日志

1.环境支持： 官方不再支持Node 4,Node 6,最好使用v8.5.0以上稳定版本。支持93%的ES6语法。因为webpack4使用了很多JS新的语法，它们在新版本的 v8 里经过了优化。

2.0配置： 受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。webpack4不再强制需要 webpack.config.js 作为打包的入口配置文件了，它默认的入口为'./src/'和默认出口'./dist'，这对于小项目来说确实是一件不错的事情。

3.mode选项： 告知 webpack 使用相应模式的内置优化。可选 development 或 production，举个栗子。

module.exports = {
  mode: 'production'
};

或者从 CLI 参数中传递：
webpack --mode = production

选项	描述
development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

==注意：只设置 NODE_ENV，则不会自动设置 mode==

mode: development

// webpack.dev.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

mode: production

// webpack.prod.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

4.插件变化: webpack4删除了CommonsChunkPlugin插件，它使用内置API optimization.splitChunks 和 optimization.runtimeChunk，即webpack会默认为你生成共享的代码块。

5.Rule.loaders: 此选项已废弃（Rule.loaders 是 Rule.use 的别名。可以使用Rule.use）

6.WebAssembly: 开箱即用WebAssembly(这个没用到，不知道是啥)

二、升级webpack4 loader及插件的配置修改

升级webpack4首先需要更新webpack到v4.0.0以上版，然后安装webpack-cli,建议使用cnpm安装，有时候npm安装下载不下来。

npm install --save-dev webpack-cli

项目相关的loader和插件也是需要更新的，不然会报错。接下来介绍一些需要额外配置的loader和插件。

1.vue-loader（更多细节）

Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

现在 Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader。

拿