升级思路

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

1，

问题：

解决：修改loaders 为rules

2，

问题：happywebpack 报错

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

3

问题：

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

4

解决：重装最新eslint-loader

5

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

6

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

7

解决：修改格式

8

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

9

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

10

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

11

12

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

13

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

14

解决：因为在reducer里边

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

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

16

解决： 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 $/, uglifyOptions: { output: { comments: false }, minify: {}, compress: { booleans: true, warnings: false }, mangle: { // except: ["$ ", "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"]
          }
        }
      })
    ]
  }
};