02.、本地服务器

webpack-dev-server提供本地服务器以及热刷新功能

1、安装 

cnpm i webpack-dev-server -S

2、配置webpack.config.js文件

devServer : {
    contentBase : './dist', //打包后的文件夹路径
    host : 'localhost', //ip
    port : 8080, //端口
    open : true //当启动本地服务器的时候，是否自动打开页面
}

3、在package.json中添加启动服务器的命令

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

4、先执行打包命令，然后在启动服务器，然后修改代码（不是修改打包后的文件代码），页面即可实时刷新

 

案列下载地址

webpack-dev-server案列