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命名也要重启了- -！