对于每次代码发生改变时都要去手动运行,根据webpack官方文档总结出二种自动编译代码的方法。
- webpack`s Watch Mode
- webpack-dev-server
使用webpack`s Watch Mode
在package.json中添加用于启动观察模式的npm script脚本
"watch": "webpack --watch"
运行npm run watch就会编译代码,缺点是不会自动刷新浏览器。
使用webpack-dev-server
webpack-dev-server提供了一个简单的web服务器,能够实现重新加载。
执行:
--save-dev webpack-dev-server
在webpack.config.js中添加:
devServer:{
contentBase: './dist'
//告知webpack-dev-server,在 localhost:8080 下建立服务,将 dist 目录下的文件,作为可访问文件。
},
如果修改代码时,服务器会自动重新加载编译后的代码并且浏览器也会自动刷新。
切记:webpack-dev-server需要局部安装,否则会报错(全局安装运行项目后也会报错)