webpack4.x实现热更新

最新推荐文章于 2023-02-23 17:17:57 发布

harmsworth2016

最新推荐文章于 2023-02-23 17:17:57 发布

阅读量2.8k

点赞数

分类专栏： webpack 文章标签： webpack4 webpack热更新 webpack hot

本文链接：https://blog.csdn.net/harmsworth2016/article/details/89739706

版权

webpack 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

热更新

前言
环境
目录
未启动热更新
- 效果
- 代码
启用热更新
- 效果
- 代码

前言

webpack 的 webapck-dev-server 包会启动一个开发服务器，当修改入口文件或者入口文件中引入的其他文件时，webpack 会自动编译入口文件，然后刷新整个页面。然我们仅仅修改了一个文件就刷新了整个页面，这样的操作太不划算了，此时可以用到 webpack-dev-server 的热更新功能。

环境

初始化

yarn init -D

安装必要的包

yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin -D

未启动热更新

效果

当没有启用热更新时效果如下：
在这里插入图片描述
可以观察到，一旦修改了文件，则浏览器会自动刷新页面。

代码

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack4.x</title>
</head>
<body>

</body>
</html>

src/index.js

import str from './source'

console.log(str)

src/source.js

export default 'hello world'

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    port: 9000,
    // 自动打开浏览器
    open: true,
    // 告诉服务器从哪里dist目录中提供内容
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

启用热更新

效果

当启用热更新时效果如下：
在这里插入图片描述
可以观察到，浏览器并未刷新，仅仅更新了修改了的文件。

代码

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    // 只更新修改的部分，而不是刷新整个页面
    hot: true,
    port: 9000,
    // 自动打开浏览器
    open: true,
    // 告诉服务器从哪里dist目录中提供内容
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    // 打印更新的模块路径
    new webpack.NamedModulesPlugin(),
    // 热更新插件
    new webpack.HotModuleReplacementPlugin()
  ]
}

当启用热更新后，需要在 index.js 入口文件中添加热更新加载文件。
src/index.js

import str from './source'

console.log(str)

if (module.hot) {
  module.hot.accept('./source', () => {
    const str = require('./source').default
    console.log(str)
  })
}