手动 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 的配置