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 路由匹配更靈活。