springleo's blog

# Webpack3.x升级Webpack4指南

自从Parcel零配置方案得到程序员青睐，Webapck才幡然醒悟。相对于以前Webapck3.x复杂的loader、plugin等配置，Webpack4遵循约定大于配置，做了很多默认话配置。Webpack官方也出了v3到v4升级指南 (opens new window)，但没有写的很具体，特别是第三方插件升级这块。以下跟随笔者项目实例，看看如何把3.x版本项目升级到webpack4。升级实例：node-vue-ui-website (opens new window) （node-vue-ui-website是一个基于node+vue+mongoose前后端一体的yi-ui官网）

升级简要：

  1. Node版本必须大于6.0
  2. 以前的webpack拆分为 webpack 和 webpack-cli两个包
  3. webpack.config.js文件添加mode选型。根据这个字段，Webapck约定了不同环境下的默认配置。
  4. 升级第三方插件

# 1. Node版本升级

Webapck4要求安装的Node版本大于6.0，笔者安装的Node版本是8.6.0，所以不需要升级Node。升级Node推荐使用 nvm 包管理器

# 2.升级webpack

webpack从4.0起，拆分成webpack和webpack-cli两个包，所以需要先卸载掉webpack，再重新安装webpack和webpack-cli。另外笔者开发环境使用了webpack-dev-server，所以也一并升级下。

npm uninstall webpack webpack-dev-server -D
npm i webpack webpack-dev-server webpack-cli -D

# 3. webapck.config.js修改

webpack配置文件增加mode这个必要选型。

mode: process.env.NODE_ENV !== 'production' ? 'development' : 'production',

# 4. 升级第三方插件

# 4.1 升级vue-loader

对应webpack4升级的是vue-loader@15，该版本迁移有两个重大改变(不兼容)：

  1. 需要配合一个插件VueLoaderPlugin，详细 (opens new window)
  2. Loader推导规则改变。直白点就是以前写在vue-loader options下的配置项（如css、sass配置）等，不需要再写了，而是直接使用对应css、sass的rule规则。当然，升级时可以暂时不做修改，多个options也不会报错。

第一步：升级安装包

npm uninstall vue-loader -D
npm install vue-loader -D

第二部： 配合插件，这步必须有

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

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

# 4.2 升级css相关loader

css预处理器项目中使用的是scss，故需要升级相关包

npm uninstall sass-loader node-sass css-loader -D
npm install sass-loader node-sass css-loader -D

# 4.3 配置sass-resource-loader

项目中使用了sass-resouce-loader (opens new window)，用来全局导入一些scss variable或minx等，但跑起项目来会报找不到scss变量的错误。翻看sass-resource-loader和vue-loader官方文档看，原来是vue-loader@15使用了不同的推导规则，使得webpack一些配置在vue-loader下的选项，需要配置到对应loader规则下，详见官方说明 (opens new window)。

{
    test: /\.scss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        'sass-loader',
+        {
+            loader: 'sass-resources-loader',
+            options: {
+                sourceMap: true,
+                resources: [path.resolve(__dirname,  './src/assets/scss/var.scss')]
+            }
+        }
    ]
},
{
    test: /\.vue$/,
    loader: 'vue-loader',
-    options: {
-        loaders: {
-            'scss': [
-                'vue-style-loader',
-                'css-loader',
-                'sass-loader',
-                {
-                    loader: 'sass-resources-loader',
-                    options: {
-                        resources: path.resolve(__dirname, './src/assets/scss/var.scss')
-                    }
-                }
-            ]
-        }
-    }
}

# 总结

实践升级webpack下来，没有想象中复杂，前三步是必要条件，主要是最后的第三方插件升级较为麻烦，需要到github上翻看对应插件的文档。不过好在webpack报错较为清晰，能很明确的找出哪些插件需要更新。所以，开始动起手来enjoy你的webpack升级。

Canvas基础 →