安裝webpack-dev-server
（webpack版本3.6.0，webpack-dev-server版本2.11.3）注意版本兼容問題，不然會有N多錯誤。
1 npm i webpack-dev-server@2.11.3 -D //安裝到本地依賴
webpack-dev-server 類似於 node 中的nodemon工具。
在package.json中配置dev --> webpack-dev-server即可使用 npm run dev來運行webpack-dev-server
{ "name": "webpackStudy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.3.1" }, "devDependencies": { "webpack": "^3.12.0", "webpack-cli": "^3.2.1", "webpack-dev-server": "^2.11.3" } }
如圖，成功運行。
然后把index.html中的bundle路徑改為根路徑。/bundle.js
（webpack-dev-server幫我們打包生成的bundle.js文件並沒有存放到物理磁盤上，只是放在內存中，當項目調試完后手動運行webpack打包一次就可以了）
webpack-dev-server配置命令
修改配置文件，使webpack-dev-server運行后自動打開默認瀏覽器
修改package.json中 ---> "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" //open打開瀏覽器，port設置端口，contentBase設置打開后的根路徑, hot每次更新代碼不會重新生成bundle.js而是類似補丁的方式更新修改部分代碼，並且在瀏覽器可以實現無刷新重載
配置命令第二種方式：
package.json (使用配置文件)
{ "name": "webpackStudy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev2": "webpack-dev-server --open --port 3000 --contentBase src", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.3.1" }, "devDependencies": { "webpack": "^3.12.0", "webpack-cli": "^3.2.1", "webpack-dev-server": "^2.11.3" } }
webpack.config.js
const path = require('path');
//啟用熱更新的第二步
const webpack = require('webpack');
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: { //這是配置webpack-dev-server命令參數的第二種形式
open: true, //自動打開瀏覽器
port: 3000, //設置端口
contentBase: 'src', //指定托管的根目錄
hot: true //啟用熱更新的第一步
},
plugins: [ //配置插件的節點
//啟用熱更新第三步
new webpack.HotModuleReplacementPlugin() //new一個熱更新的模塊對象
]
}