webpack踩過的坑

環境：

IE 11
vue ^2.6.12

webpack ^5.11.0
webpack-dev-server ^3.11.0
babel ^7.12.10

問題一：開發模式下，chrome 上正常，IE11 上白屏並有報錯信息 SCRIPT1002: 語法錯誤

【解決】

問題二：Invalid Host/Origin header

模塊熱替換，chrome 上正常，IE11 上異常並且控制面板持續報錯

【問題定位】

新版的 webpack-dev-server 出於安全考慮，默認檢查 host，如果沒有配置 host，將中斷訪問。
所以，方法一是配置 host。
當然，在我們的開發環境下，也可以通過禁用掉 disableHostCheck 這一配置，處理這個問題。

devServer: {
  host: '127.0.0.1', // 方法一
  disableHostCheck: true, // 方法二
},

問題三：模塊熱替換失效，瀏覽器頁面沒有自動更新

github上相關 issue

【解決】設置 target: 'web'

webpack.config.js

{
...
mode: 'development',
target: 'web',   // 設置target
...
}

問題四：加載圖片時，報錯。Error: Automatic publicPath is not supported in this browser

【解決】設置 output 中的 publicPath屬性

webpack.config.js

output: {
  ...
  publicPath: '/',
  ...
}