首先配置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+端口號均可以顯示項目內容
由于使用了熱加載在验,在項目中做更改不會引起整體刷新