webpack4使用笔记之devServer

devServer

• devServer需要webpack-dev-server配合使用，借助webpack-dev-server快速启动一个静态服务

➔ host:：指定 ip 或域名
➔ port： 指定端口
➔ contentBase：指定根目录
➔ open：是否自动打开浏览器
➔ hot：是否启用热替换
➔ disableHostCheck：禁用 host 检查
➔ proxy：代理请求
➔ before：自定义中间件

"scripts": {
    "dev": "webpack-dev-server --mode development"
}

• 当 mode为 development 并且启用 HotModuleReplacementPlugin 插件时，会具备 hot reload` 的功能。即当源码文件变化时，会即时更新当前页面，以便看到最新的效果。

• HotModuleReplacementPlugin

  • 启用热替换模块(Hot Module Replacement)，也被称为 HMR

...
devServer: {
    host: '127.0.0.1',  // 指定 ip 或域名
    port: 80, 
    contentBase: path.join(__dirname, 'dist'), // 指定根目录
    open: true,  // 否自动打开浏览器
    hot: true,   // 是否启用热替换
    disableHostCheck: true, // 禁用 host 检查
    proxy: {},
    before () {} // 自定义中间件
},
plugins: {
    new webpack.HotModuleReplacementPlugin({
      // Options...
    })
}