Powered by md-Blog  文 - 篇  访客 -

【热更新】webpack-dev-server 及指定浏览器打开


更新:2020-03-24 16:26:24  /  创建:2020-03-18 11:22:26  /  分类:Webpack  / 
不要删除

简称

WDS

热更新

配置成功后,浏览器 console 输出:
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] Live Reloading enabled.

优点

  • 不刷新浏览器
  • 不输出文件,而是放在内存中

安装

yarn add webpack-dev-server -D
修改 package.json,添加如下脚本,此处为两份 webpack 配置,一个生产环境,一个开发环境。
"scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js"
},

运行

yarn run dev
yarn run build

配置

webpack.dev.js 文件
devServer: {                
    publicPath: '/dist',        // 路径,可省略
    open: 'google chrome',      // 浏览器选择
    compress: true,             // 压缩
    host: '0.0.0.0',            // 设置局域网访问
    port: '3000',               // 设置端口
    hot: true,                  // 热更新
    inline: true,               // 热更新用
    historyApiFallback: true    // H5用
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

指定浏览器打开,其他浏览器,将 google chrome 替换为:

  • firefox
  • microsoft edge
  • opera
  • safari
不要删除

小站不易,感谢支持!