Webpack 4 學習04（配置webpack-dev-server）

前提： Webpack 4 學習01（基礎配置）

​ Webpack 4 學習02（通過配置文件打包）

一、了解 webpack-dev-server

• webpack-dev-server用來配置本地服務器
• 為 webpack 打包生成的文件提供web服務
• 自動刷新和熱替換（HMR）

二、安裝webpack-dev-server

npm install --save-dev webpack-dev-server

三、 配置webpack.config.js文件

devServer:{
		contentBase:'./dist',  //設置服務器訪問的基本目錄
		host:'localhost', //服務器的ip地址
		port:8080,  //端口
		open:true  //自動打開頁面
}

四、配置package.json

"scripts": {
    "start": "webpack-dev-server --mode development"
 }

五、運行命令

npm run dev 打包文件

npm run start 打開服務器