使用webpack-dev-server中遇到不能瀏覽器無法自動刷新的問題;尋找多方答案后明白了一些;
下面有一些需要注意的點:
1.webpack-dev-server並不能讀取你的webpack.config.js的配置output!!
你在webpack.config.js里面的配置output屬性是你用webpack打包時候才起作用的,對webpack-dev-server並不起作用
2.webpack-dev-server打包生產的文件並不會添加在你的項目目錄中!!
它默認打包的文件名是bundle.js,不會真的出現在你的項目目錄中,據推測應該是保存在自己的環境中
自動刷新的配置方法(inline模式):
我習慣的做法是在項目的package.json里面添加
"scripts": { "start": "webpack-dev-server --inline --content-base ." }
這樣通過npm start命令就能啟動 inline模式了,當然也可以具體的輸入webpack-dev-server命令
關鍵的是你的index.html也就是你的項目入口的html文件里面引用這個bundle.js文件需要直接引用根目錄下面的!
<body>
<div id="app"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
不能引用你webpack配置的bundle.js文件目錄,webpack配置的這個bundle.js文件,只有在你手動打包webpack之后才會改變!
總結下就是:webpack里面配置的bundle.js需要手動打包才會變化目錄可以由你自己指定!webpack-dev-server自動檢測變化自動打包的是開發環境下的bundle.js,打包路徑由你的contentBase決定!兩個文件是不一樣的
