首先配置package.json文件
"build":"webpack --mode production",
"dev":"webpack-dev-server --mode development"
配置webpack.config.js文件
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
errors:true, //编译过程中如果有任何错误，都会显示到页面上
},
// open:true 自动帮你打开浏览器
hot:true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
module.exports = config
然后npm run dev打开可以看到
image.png
然后打开我们的浏览器，输入127.0.0.1:8000或者localhost:8000或者ip+端口号均可以显示项目内容
由于使用了热加载，在项目中做更改不会引起整体刷新
网友评论