webpack-dev-server的自动更新配置

一、背景

测试发布一个项目,修改jsx中的内容,页面不自动更新。

每次必须执行npm run build;然后执行npm run start。

脚本如下:

"scripts": {
  "start": "webpack-dev-server --history-api-fallback --colors --no-info --open",
  "build": "webpack"
},

build每次要花6秒左右,效率实在不高。

二、检查

1. webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js'
}

看的出,运行文件打包成bundle.js,存放路径在dist目录下。

2. index.html

<script src="./dist/bundle.js"></script>

引用了生成的项目文件bundle.js。

三、原因

webpack-dev-server动态生成的包并不发布到你的真实目录中(dist/),而是放在了内存中。

四、解决

将项目的指向配置到虚拟服务器中。

修改index.html中的src路径为:

<script src="http://localhost:8080/bundle.js"></script>

五、测试

1. 执行npm run build。
2. 然后执行npm run start。
3. 修改jsx文件,保存。

哈哈,自动更新了。

这些再也不用修改一个label命名也要重启了- -!