webpack5 模块热更新

每次有代码变更,都需要在浏览器自动刷新。实际上webpack是支持模块热更新的,当代码变更后,自动刷新浏览器。

webpack依赖:

"webpack": "^5.23.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"

重点:在webpack.config.js文件中配置target,声明在开发环境中执行热更新操作。

target: process.env.NODE_ENV === 'development' ? 'web' : 'browserslist',

package.json中的browserslist保留

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]