大前端【3-2笔记】webpack中的原生HMR

HMR

准备工作在下边

1、HMR

Hot-Module-Replace:模块热替换，模块热更新。是webpack中最强大的功能之一，极大程度的提高了开发者的工作效率。

热替换只将修改的模块实时替换至应用中。

2、开启HMR

HMR已经集成到了webpack-dev-serve中。

webpack.config.js中配置：

const webpack = require("webpack")

devServer: {
   
  hot: true
};

 //插件
 plugins:[
 	new webpack.HotModuleReplacementPlugin()
 ]

修改css文件会自动热更新，但是修改js文件还是会刷新页面。

因为css文件是通过loader进行处理的，loader在内部已经处理好了热更新，但是js是没有规律的，所以需要手动处理模块热替换逻辑。但如果我们使用了框架的话，js就有了一定的规律，所以可以统一处理,可能就不用我们处理模块热更新了（依情况而定）

3、处理js模块热替换

HMR APIs

修改JS模块热替换

// 添加监听 heading.js的变化，然后按照实际情况在函数内部执行要执行的函数

module.hot.accept("./heading.js", () => {
   
  console.log("heading模块更新了")
})

4、图片模快热替换

–hot会自动监听突变的变化，当图片变化以后，会刷新浏览器将图片渲染到页面上，为了防止浏览器的刷新，使用HMR提供的APIs，修改img模块热替换，配置如下：

module.hot.accept("./banner.jpg", () => {
   
  myImg.src = bgc
  document.body.appendChild(myImg)
})

5、HMR注意事项

• 处理HMR的代码报错会导致自动刷新，解决方法：修改配置文件，hot:true修改为hot-Only:true

• 没启动HMR的情况下，HMR API会报错 解决方法：将HMR API代码放在if判断中：

  if(module.hot){
      module.hot.accept("./heading.js", () => {
        console.log("heading模块更新了")
      })
  	module.hot.accept("./banner.jpg", () => {
        myImg.src = bgc
        document.body.appendChild(myImg)
      })
  }
  

• 在代码中写了一些与业务无关的代码，解释：当我们上线打包时，关闭hot：true的选项之后，打包结果不会有任何影响，业务代码也不会被打包进去。

准备工作：

1、heading.js

export default () => {
   
  const element = document.createElement('h2')

  element.textContent = 'Hello world!1232'
  element.addEventListener('click', () => {
   
    alert('123')
  })

  return element
}

2、index.css

body{
   
  background-color: rgb(223, 201, 205);
  font-size: 12px;
}

3、index.js

import createHeading  from './heading.js'

const heading = createHeading()

document.body.append(heading)

4、main.js

import createHeading from './heading.js'
import './index.css'
import bgc from './banner.jpg'

const myImg= new Image()
myImg.src = bgc
document.body.appendChild(myImg)

const heading = createHeading()

document.body.append(heading) 

module.hot.accept("./heading.js", () => {
   
  console.log("heading模块更新了")
})

module.hot.accept("./banner.jpg", () => {
   
  myImg.src = bgc
  document.body.appendChild(myImg)
})

5、webpack.config.js

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

module.exports = {
   
  mode: 'none',
  entry: './src/main.js',
  output: {
   
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    // publicPath: 'dist/'
  },
  // devtool: 'source-map',
  devtool: 'eval',
  //为webpack-dev-server指定相关的选项
  devServer: {
   
    hot: true
  },
  module: {
   
    rules: [
      {
   
        test: /.html$/,
        use: [
          'html-loader'
        ]
      },
      {
   
        test: /.css$/, //正则表达式，匹配打包过程中遇到的文件路径
        //注意：use的顺序是从后往前执行，所以先执行的loader一定要放到末尾
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
   
        test: /.jpg$/, //正则表达式，匹配打包过程中遇到的文件路径
        //注意：use的顺序是从后往前执行，所以先执行的loader一定要放到末尾
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
   
      title: 'Webpack plugin Sample', //生成的html的标题 //生成的html的标题,没有模板的情况下，生成的dist文件夹下的html文件
      mata: {
   
        viewport: 'width=device-width'
      },
      template: './src/index.html'
    }),
    // new CopyWebpackPlugin({
   
    //   patterns: [{ from: path.resolve(__dirname, './public'), to: "public" }],
    // })
    new webpack.HotModuleReplacementPlugin()
  ]
}

6、一张图片

转载：https://blog.csdn.net/qiuqiu1628480502/article/details/115605240