webpack热更新案例实现

最新推荐文章于 2022-11-25 01:48:47 发布

我的小英短

最新推荐文章于 2022-11-25 01:48:47 发布

阅读量2.2k

点赞数

分类专栏： node javascript webpack 前端工具文章标签： webpack nodejs hdr js

本文链接：https://blog.csdn.net/WU5229485/article/details/91974532

版权

本文介绍了webpack的热更新功能，即Hot Module Replacement (HMR)，并详细阐述了如何在开发环境中启用这一特性。通过修改webpack配置，使用内置的HotModuleReplacementPlugin插件，以及调整命令行选项，可以实现在编辑JS和CSS文件后无需刷新页面即可更新的效果。

摘要由CSDN通过智能技术生成

webpack热更新案例操作

导读

模块热替换(Hot Module Replacement 或 HMR)，也叫热更新，它是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行浏览器刷新或者命令行重启。
注意：热更新 HMR只能在开发环境使用，不适用于生产环境

使用`webpack.config.js`启用 `HMR`

启用该功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。我们还要删除掉 project.js的入口起点，因为它现在正被 index.js 模块使用。

** 1. webpack.config.js **

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require("webpack")

module.exports = {
   
  entry: {
   
    app: './src/index.js',
  },
  devtool: 'inline-source-map',
  devServer:{
      // 新增 devServer
    contentBase: './dist',
    hot: true 
  },
  output: {
   
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
   
      title: 'output出口管理'
    }),
    new webpack.NamedModulesPlugin(),   // 新增引入webpack默认方法 NamedModulesPlugin()
    new webpack.HotModuleReplacementPlugin(),   // 新增引入webpack默认方法 HotModuleReplacementPlugin()
  ]
};

2. 我们使用npm run start 来执行命令webpack-dev-server --open

3. 编辑index.js如下：

// 在最底下新增如下
if (module.hot) {
   
   module.hot.accept('./project.js', function() {
   
    console.log('Accepting the updated printMe module!');
     printMe();
   })
 }

4. 修改project.js如下：

export default function printMe() {
   
  console.log(' 我会打印这条信息…')
}

5. 命令行打印

D:\me\npm\test\webpack-test>npm run start

> webpack@1.0.0 start D:\me\npm\test\webpack-test
> webpack-dev-server --open

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
i ｢wdm｣: Hash: d067c0aaf40790e7daa9
Version: webpack 4.34.0
Time: 4304ms
Built at: 2019-06-14 13:31:15
        Asset       Size  Chunks             Chunk Names
app.bundle.js   2.35 MiB     app  [emitted]  app
   index.html  186 bytes          [emitted]
Entrypoint app = app.bundle.js
[0] multi ./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./src/index.js 52 bytes {
   app} [<