webpack踩过的坑

环境:

IE 11
vue ^2.6.12

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

问题一:开发模式下,chrome 上正常,IE11 上白屏并有报错信息 SCRIPT1002: 语法错误

webpack踩过的坑

【解决】

webpack踩过的坑

问题二:Invalid Host/Origin header

模块热替换,chrome 上正常,IE11 上异常并且控制面板持续报错

webpack踩过的坑

【问题定位】

新版的 webpack-dev-server 出于安全考虑,默认检查 host,如果没有配置 host,将中断访问。
所以,方法一是配置 host
当然,在我们的开发环境下,也可以通过禁用掉 disableHostCheck 这一配置,处理这个问题。

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

问题三:模块热替换失效,浏览器页面没有自动更新

github上相关 issue

webpack踩过的坑

【解决】设置 target: ‘web‘

webpack.config.js

{
...
mode: ‘development‘,
target: ‘web‘,   // 设置target
...
}

webpack踩过的坑

上一篇:Linux通过netstat命令统计连接数


下一篇:Curl命令