升级思路

首先升级webpack到4.8.3，然后fix error

1，

问题：

image.png

解决：修改loaders 为rules

image.png

2，

问题：happywebpack 报错

解决：卸载happywebpack， 重新安装最新版本happywebpack

3

问题：

image.png

解决：
重装最新html-webpack-plugin

4

图片.png

解决：
重装最新eslint-loader

5

图片.png

解决：
重装最新"svg-sprite-loader": "^3.8.0",

6

图片.png

重装最新"stylus-loader": "^3.0.2",

7

图片.png

解决：
修改格式

8

图片.png

解决：
重装最新"react-pdf": "^3.0.5",

9

图片.png

解决：
修改为
import { Document, Page, setOptions } from "react-pdf/dist/entry.webpack";

10

图片.png

解决：
重新安装"copy-webpack-plugin": "^4.5.1",

11

图片.png

12

图片.png

解决：
安装 "uglifyjs-webpack-plugin": "^1.2.5"

13

图片.png

解决：
npm install add-asset-html-webpack-plugin@next
安装 "add-asset-html-webpack-plugin": "^3.0.0-0",

14

图片.png

解决：
因为在reducer里边

图片.png

load={() => {
      return import("./reducers/Main/index.js").then(reducer  => {
        // debugger;
        // const reducer = result.default;
        debugger;
        injectReducer(store, { key: "Main", reducer  });
        return import(/* webpackChunkName: "Main" */ "./containers/Main");
      });
    }}

在原来的旧版本的webpack中，injectReducer(store, { key: "Main", result }); 这里result是直接可以获取到上面的reducer出来的函数，但是更新webpack之后，
reducer出来的函数变成了

{
  default: reducer出来的函数
}
所以上述代码需要变成如下

load={() => {
return import("./reducers/Main/index.js").then(result => {
// debugger;
const reducer = result.default;
debugger;
injectReducer(store, { key: "Main", reducer });
return import(/* webpackChunkName: "Main" */ "./containers/Main");
});
}}

15

图片.png

解决：
因为使用了dllplugin，所以需要重新打包dll文件
执行 npm run dll

16

图片.png

解决：
1, 注释掉
webpack.optimize.UglifyJsPlugin 这里的代码

const plugin = [
  new webpack.DllPlugin({
    /**
     * path
     * 定义 manifest 文件生成的位置
     * [name]的部分由entry的名字替换
     */
    path: path.join(outputPath, "manifest.json"),
    /**
     * name
     * dll bundle 输出到那个全局变量上
     * 和 output.library 一样即可。
     */
    name: "[name]",
    context: __dirname
  }),
  new webpack.DefinePlugin({
    "process.env.NODE_ENV": JSON.stringify("production")
  })
  // new webpack.optimize.UglifyJsPlugin({
  //   mangle: {
  //     except: ['$', 'exports', 'require']
  //   },
  //   exclude: /\.min\.js$/,
  //   // mangle:true,
  //   compress: { warnings: false },
  //   output: { comments: false }
  // })
];

2，在module.exports 里边添加
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
optimization: {
minimizer: [
new UglifyJsPlugin({
exclude: /.min.js", "exports", "require"]
}
}
})
]

module.exports = {
  devtool: "source-map",
  mode: "development",
  entry: {
    dllSelf: lib
  },
  output: {
    path: outputPath,
    filename: "[name].[hash].js",
    /**
     * output.library
     * 将会定义为 window.${output.library}
     * 在这次的例子中，将会定义为`window.vendor_library`
     */
    library: "[name]"
  },
  plugins: plugin,
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        exclude: /\.min\.js$/,
        uglifyOptions: {
          output: {
            comments: false
          },
          minify: {},
          compress: {
            booleans: true,
            warnings: false
          },
          mangle: {
            // except: ["$", "exports", "require"]
          }
        }
      })
    ]
  }
};

17

问题：

图片.png

18

问题：

图片.png

解决：
安装 "rimraf": "^2.6.2",

19

图片.png

解决：

20

图片.png

收益
build
![图片.png](https://upload-images.jianshu.io/upload_images

升级后

图片.png