首先配置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, //編譯過(guò)程中如果有任何錯(cuò)誤，都會(huì)顯示到頁(yè)面上
    },
    // open:true 自動(dòng)幫你打開(kāi)瀏覽器
    hot:true
}
config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
)
 
module.exports = config

然后npm run dev打開(kāi)可以看到

image.png

然后打開(kāi)我們的瀏覽器，輸入127.0.0.1:8000或者localhost:8000或者ip+端口號(hào)均可以顯示項(xiàng)目?jī)?nèi)容

由于使用了熱加載，在項(xiàng)目中做更改不會(huì)引起整體刷新