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

一、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 依赖删除掉，重新安装匹配版本插件。
    1
    $ npm install react-utils-dev --save-dev

二、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
      1. 修改 webpack 配置文件：
        1
        2
        - new InterpolateHtmlPlugin(env.raw),
        + new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),

三、When specified, “proxy” in package.json must be a string

运行报错提示为：

1
2
3
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 插件：
        1
        2
        3
        $ npm install http-proxy-middleware --save
        $ # 或
        $ yarn add http-proxy-middleware
      1. 创建 src/setupProxy.js 并将以下内容放入该文件中(将路由和 target 值修改为自己需要的即可):
        1
        2
        3
        4
        5
        6
        7
        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 路由匹配更灵活。