webpack提供一个可选的本地开发服务器,服务器基于node.js搭建,内部使用express框架,可以让浏览器自动刷新显示修改结果。(服务器只会在内存中保存修改,npm run build后才将修改保存到硬盘文件)
步骤1:本地服务器是一个单独的模块,在使用之前先安装它。
npm install webpack-dev-server@2.9.1 --save-dev
步骤2:修改webpack.config.js。
增加devServer对象。devServer也是webpack的一个选项,有如下属性:
contentBase:为哪一个文件夹提供本地服务,默认是根文件夹
port:端口号,默认8080
inline:面面实时刷新
historyApiFallback:在SPA页面中,依赖HTML5的history模式。
devServer:{
contentBase:'./dist',
inline:true
}
步骤3:修改package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev":"webpack-dev-server --open"
},
--open自动打开浏览器