首先，对首先升级webpack相关的依赖就（shui）不（zi）说（shu）啦？
主要是介绍下几个重要的大变化。

一、 mode

mode用来区分开发环境还是打包环境，此配置影响到后面的许多配置的默认配置。

1
mode:  xxx  // 可用development、production

二、loaders的变化

新的rules系统取代了旧版本的loaders，loaders虽然还能兼容，rules更方便日后的理解和区别；
注意的点：

  • rules取代loaders;
  • [“xx-loader”, “xx-loader”]取代！链式调用；
  • uses可接受多个loder，loader兼容一个存在；
  • 所有的loader不可缺省；
  • json-loader自动支持；
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
module: {
    rules: [
        {
            test: /\.css$/,
            use: [ // 多个loader, 取消已经！隔开的方式，而采用数组形式的链式调用[x, x, x]
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                }
            ]
        },
        {
            test: /\.jsx$/,
            loader: "babel-loader",
            options: {
                // ...
            }
        }
    ]
}

三、LoaderOptionsPlugin

对loader options配置项的补充

1
2
3
4
5
6
plugins: [
   new webpack.LoaderOptionsPlugin({
     debug: true,
     xxx
   })
]

四、optimization

包括压缩、分割、抽取第三方库…配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
optimization: {
    runtimeChunk: {
        xxx
    },
    noEmitOnErrors: true,
    minimize: true,
    minimizer: [
        xxx
    ],
    splitChunks: {
        xxx
        cacheGroups: {
            xxx
        },
    },
},

抽取指定库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
entry: {
    app: xxx,
    vendors: ["react", "react-dom"],
},

splitChunks: {
    xxx
    cacheGroups: {
        vendor: {
            name: "vendors",
            test: "vendors",
            priority: -1,
        },
    },
},

参考：
https://www.webpackjs.com/guides/migrating/