手动 webpack2.x 升级到 webpack4.8.3(当前github最新版本)

手动 webpack2.x 升级到 webpack 4.8.3(当前github最新版本)

一直使用的 webpack 是 2.3.3 版本作为生产环境使用，看了 react-create-app 的 webpack 是 3.8 版本，想着都是折腾，就直接自己手动升级到 4.8.3 吧，然后就动手改了，折腾了一个下午和晚上升级完全成功。

之前面试阿里，那面试官在面完我后，说我没过，但是他还很耐心的和我交流了半小时来的，教我如何学习折腾一个东西，非常感谢哪位好心人教会我，想要提高就得多折腾。

webpack4 更改的接口是多，但是兼容性挺好，基本上没啥大的变更，找准升级的部分更改配置就行。

开始吧！

更换的包列表

新增

需要重新安装
resolve-from：该包需要强制性重装，作为依赖包不会更新；
uglifyjs-webpack-plugin： 该插件用来丑化的
extrac-lodaer：对文件进行 hash 处理
babel-preset-env： 新增该包，为了解析 jsx 的自带功能

> npm i -D -f babel-preset-env resolve-from@^3.0.0 uglifyjs-webpack-plugin extract-loader

更新的包

> npm i -D -f webpack webpack-cli babel-core babel-loader react-axe@3.0.1 extract-text-webpack-plugin file-loader html-loader html-webpack-plugin 

更新包后出现的问题

react-axe：该包需要指定 3.0.1 才能支持 webpack4.x
resolve-from: 该依赖包需要高于3.x 版本，但是依赖环境不会下载最新的包
html-webpack-plugin:需要强制性的更新到最新版本，否则 解析不了，报错

webpack4 的配置记录

需要更改参数位置的 plugins 是 uglifyjs 和 commonChunk

module 的变更

{
    module:{
        rules:[
        // less 和 css 等合并在一块处理
            { // 自定义 less 主题
                test: /\.(css|less)$/,
                use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader",
                    options: {
                        modifyVars: theme  // 处理 antd 主题的配置
                }]
            },
        // 文件处理
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                        limit:10000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        // outputPath:'images' //定义输出的图片文件夹
                    }
                }]
            },
            {
                test:/\.(ttf|eot|svg|woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use:[{
                    loader:'url-loader',
                    options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                        limit:10000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        // outputPath:'images' //定义输出的图片文件夹
                    }
                }]
            },
        ]
    }
}

移植的 plugins 配置

{
// 该参数原来是在 plugins 参数的
    optimization:{
        splitChunks:{
            chunks:'all'
        },
        minimizer: [
            new UglifyJsPlugin({
                /* your config */
                uglifyOptions:{
                    compress:true,
                    ecma:6,
                    output:{
                        comments:false,
                    },
                    compress:{
                        dead_code:true,
                        drop_console:true,
                    }
                },
                sourceMap:false,
            })
        ]
    },
}

html-webpack-plugin 升级

参考文章：html-webpack-plugin 升级到 webpack4 的配置

A tale of Webpack 4 and how to finally configure it in the right way

总结

先使用原来的配置，不更改，使用最新版本的 webpack 来运行，看到错误时候有3个解决途径；

1. github/issue

2. 官方文档 :

官网得好好利用，原来不知道配置选项参数(加载器、插件)需要自己在指南详细内容里找链接 才能跳到相应接口

3. google

这3个方式，在看到错误，去查找错误信息的时机非常重要，搜索错误信息位置(搜索引擎)和方式(关键词)对的话，基本上错误都是一下命中查到相关的信息了

罗列参考文章：

基本上 webpack4 比较全的文章

webpack3 升级到 4 的指导

webpack UglifyJsPlugin 的配置