Webpack核心概念_Hot Module Replacement 热模块更新

Hot Module Replacement 热模块更新
什么是HMR?
我们写一个例子:
在webpack.config.js配置一下css文件的解析

      {
        test: /\.css/,
        use: [ 'style-loader', 'css-loader', 'postcss-loader']
      },

然后index.js 中写

import './style.css'
var btn = document.createElement('button');
btn.innerHTML = '点击'
document.body.appendChild(btn)
btn.onclick = function () {
  var div = document.createElement('div')
  div.innerHTML = 'item'
  document.body.appendChild(div)
}

style.css给偶数div设置颜色

div:nth-of-type(odd) {
  background-color: rgb(14, 185, 128);
}

网页内容就是点击就会生成一个item
Webpack核心概念_Hot Module Replacement 热模块更新_第1张图片
如果我们修改style.css中的颜色,浏览器就会刷新,我们点击生成的item就会不见,我们想要测试颜色,需要重新点击生成测试,这样的话就很麻烦,于是我们想改变样式代码的时候,不刷新页面,只是把样式代码替换掉,页面上之前渲染出的内容不要动,这个时候我们就可以借助HMR的功能了。
要想使用HMR,需要做一些配置,在webpack.config.js中:

const webpack = require('webpack');
  devServer: {
    contentBase: './dist',
    open: true,
    hot: true,
    hotOnly: true,
    host: "0.0.0.0"
  },
    plugins: [
    new HtmlWebpackPlugin({template: 'src/index.html'}),
    new CleanWebpackPlugin (),
    new webpack.HotModuleReplacementPlugin()
  ]

先引入一个webpack插件,因为是webpack自带的,所以引入webpack,然后在plugin中配置new webpack.HotModuleReplacementPlugin()
加一个hotL true, 意思是让webpack-dev-server开启一个热更新的功能。hotOnly: true,即便是HMR的功能没有生效,也不让浏览器自动的重新刷新
这样配置完成后webpack中的HTML功能就开启了
那么HMR功能可以解决什么问题呢?
1.方便调试css: css文件做了修改,但是不会影响之前js对应上的变更,只会替换页面css的内容,不会改js渲染出的内容,这样的话做样式调试的话就方便多了
2.模块之间独立:引入多个模块,修改其中一个模块,不影响另外一个模块
Webpack核心概念_Hot Module Replacement 热模块更新_第2张图片

if (module.hot) {    // 如果当前的项目开启了HMR功能,,那么就会执行这个函数
module.hot.accept('./number, () => {       // 这个方法第一个参数接收依赖的文件名字,如果number这个文件发生了变化,就会执行后面的函数
document.body.removeChild(document.getElementById('number'))
number()
})
}

样式文件修改,HMR的效果就出来了,但是js文件,想实现HMR的效果,还要手写上面的代码,事实上引入css代码也需要上面的代码,为什么不需要写了呢,因为这一段代码在css-loader中已经帮我们编写完毕了。
vue中也有HMR功能的,但是从来没有写过上面的代码,因为vue-loader内部也帮助我们编写完毕了。
如果我们在文件中引入比较偏的文件类型,比如说一些数据文件,这些文件的loader里面并没有内置HMR的效果,所以遇到这种文件还是需要手动的写module.hot.accent的这样的代码
所以大家要知道,要是实现HMR,本质上都要写上面的代码

技巧:
1.使用webpack-dev-server会帮助我们打包项目,但是打包生成的文件并不会放在dist目录下,而是放在了电脑中的内存里面,这样的话可以有效的提升打包的速度,让开发更快捷。
2. 改变webpack.config.js,要重新运行项目
3. 如果不配置hotOnly:true,如果HMR出现问题,那么webpack-dev-server会帮助我们重新刷新浏览器,不想要重新刷新,要加这个配置。 new webpack.HotModuleReplacementPlugin()一定要配置,要不然不会HMR功能不会生效

官网: DOCUMENTATION—>GUIDES—>Hot Module Replacement
DOCUMENTATION—>API—>Hot Module Replacement HMR的方法

你可能感兴趣的:(webpack)