关于webpack-dev-server不能及时更新的问题

Posted 2021-01-02 reiko

问题描述：

配置好了webpack-dev-server之后，修改文件，发现它可以重新编译，但是浏览器页面并没有自动更新。

比如我在脚本里新添了一句alert(1234), 虽然webpack-dev-server重新编译了，但是浏览器页面并没有弹出1234.

解决：

需要在webpack.config.js中配置output的publicPath项。如下所示：

1 output: {
2     path: path.resolve(__dirname, ‘dist‘), //打包后存放的地址
3     publicPath:‘/dist‘, //访问文件时用的地址
4     filename: ‘js/[name].js‘
5   }

解释：

webpack官网有这么一句话：The webpack-dev-server also takes a hint from publicPath, using it to determine where to serve the output files from.

意思就是说，webpack-dev-server通过publicPath配置项提供的地址来寻找所服务的文件。

而我们一般想着它会通过path设置的地址找文件。其实path的地址是用来指定打包后的文件要存放在哪里。