Webpack3.x升级Webpack4指南

# # Webpack3.x升级Webpack4指南

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

升级简要：

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

# # 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

1
2
3

# # 3. webapck.config.js修改

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

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

1
2

# # 4. 升级第三方插件

# # 4.1 升级vue-loader

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

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

第一步：升级安装包

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

1
2
3

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

    // webpack.config.js
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    module.exports = {
      // ...
      plugins: [
        new VueLoaderPlugin()
      ]
    }

1
2
3
4
5
6
7
8
9
10

# # 4.2 升级css相关loader

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

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

1
2
3

# # 4.3 配置sass-resource-loader

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

    {
        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')
    -                    }
    -                }
    -            ]
    -        }
    -    }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# # 总结

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

编辑

← Webpack4 devServer配置详解 Canvas基础→