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