Webpack 4.x更改端口

首先配置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+端口号均可以显示项目内容

由于使用了热加载，在项目中做更改不会引起整体刷新