Webpack3 升级到 webpack4 时遇到的问题汇总

项目在对 webpack 的版本升级的过程当中，出现了各类各样的问题，今天就把其中比较典型的问题总结一下，做为记录。

1、MissingDeps.some is not a function

错误提示中，提示 react-dev-utils 包有问题，TypeError: MissingDeps.some is not a function。

• 解决方案：升级 react-utils-dev 包到 6.0.0 版本以后便可。将 package.json 中的 react-utils-dev 依赖删除掉，从新安装匹配版本的插件。

$ npm install react-utils-dev@next --save-dev
复制代码

2、this.htmlWebpackPlugin.getHooks is not a function

运行项目时，提示错误：this.htmlWebpackPlugin.getHooks is not a function

• 解决方案：
  • 1. 安装与 webpack4 匹配的 html-webpack-plugin 插件：npm install html-webpack-plugin@next --save-dev
  • 2. 修改 webpack 配置文件：

  - new InterpolateHtmlPlugin(env.raw),
  + new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
  复制代码

3、When specified, "proxy" in package.json must be a string

运行报错提示为：

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.
复制代码

• 错误出现缘由：使用 create-react-app 搭建脚手架，在 CRA2.X 升级以后，对 proxy 的设置做了修改。

  • 当使用 proxy 为字符串时不须要修改，能够直接在 package.json中添加 proxy 字段，例如："proxy": "http://localhost:4000",
  • 当使用多个 proxy 时，就须要结合 http-proxy-middleware 进行使用。
  • create-react-app 官网说明地址

• 解决方案：

  • 1. 安装 http-proxy-middleware 插件：

    $ npm install http-proxy-middleware --save
    $ # 或
    $ yarn add http-proxy-middleware
    复制代码

  • 2. 建立 src/setupProxy.js 并将如下内容放入该文件中(将路由和 target 值修改成本身须要的便可):

    const proxy = require('http-proxy-middleware');
    
    module.exports = function(app) {
        app.use(proxy('/api', { target: 'http://localhost:5000/api' }));
        app.use(proxy('/test', { target: 'http://localhost:4000/test' }));
        ...
    };
    复制代码

注意： 无需在任何位置导入此文件。 它在启动开发服务器时会自动注册。

注意： 此文件仅支持 Node 的 JavaScript 语法。 请务必仅使用支持的语言特性（即不支持 Flow ，ES Modules 等）。

注意： 将路径传递给代理函数容许你在路径上使用 globbing 和/或 模式匹配，这比 express 路由匹配更灵活。