webpack4 (五) 配置webpack-dev-server

1,136 阅读1分钟

1. 了解webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能:

(1)为静态文件提供服务

(2)自动刷新和热替换(HMR)

2. 安装webpack-dev-server

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

3. 配置webpack.config.js文件

devServer:{
contentBase:'./build',
host:'localhost',
port:8080,
open: true
},

4. 配置package.json

"scripts": {

"start": "webpack-dev-server --mode development"

}

5. 在build文件夹下新建index.html文件,在html中引入bundle.js

6. 在命令行程序运行npm run start

自动弹出页面,控制台有输出信息