current position:Home>Webpack hot update

Webpack hot update

2022-01-27 02:38:54 Celester_ best

First attach the test code for description  

html file

<body>
    <div>webpack5 Study </div>
    <!--  notes  -->
    <div>html Compress </div>
    <div class="box1"></div>
    <div class="box2"></div>

    <div class="img-box1"></div>
    <div class="img-box2"></div>
    <div class="img-box3"></div>
    <img src="./img/react.png" alt="react" />
</body>

js Entrance file

import '../css/style1.css'
import '../css/style2.less'
import test from './test.js'

console.log('index.js Yes ')

test()

function add(a, b) {
    return a + b;
}

console.log(add(1, 3))

test.js


console.log('test.js Yes ')

function test() {
    const value = 'hello world 11'
    console.log('value: ', value)
}

export default test;

css and style The file is still the style in the previous article , Don't re paste here .

The status of not turning on hot update

js File status

When hot update is not turned on , We modify print.js Code time in , Will cause the entire page to reload .

Style files

When hot update is not turned on , modify css When using styles in , The page will refresh automatically , And only the modified style file will be refreshed .

  You can see that when the hot update does not start ,css And other style files have also met the needs of hot update . This is because style-loader The hot update function has been realized . Let's focus now on html and js Hot update of .

Hot update HMR

HMR:hot module replacement Hot module update / Hot module replacement

effect : A module changes , Only this module will be repackaged , Instead of packaging all modules . Greatly improve the construction speed .

How to open HMR Hot update function

stay devServer Added to the configuration of hot:true

    devServer: {
        //  Path after project construction , That is, the project directory where the code will run 
        static: resolve(__dirname, 'build'),
        //compress Whether to start gzip Compress , Make code smaller , Faster 
        compress: true,
        //  Specify the port number of the development server 
        port: 3000,
        // open Whether to open the browser automatically , The default browser opens .
        open: true,
        //  Turn on HMR function 
        hot: true
    }

js Hot update of documents

js The hot update of the file needs to be in the entry file index.js Pass through HMR Listen for changes in other files

//module.hot by true, The instructions are on HMR function .
if (module.hot) {
    module.hot.accept('./test.js', function () {
        // module.hot.accept This method will listen test.js Changes in documents , As soon as it changes , Other modules will not be repackaged to build , Will execute the following callback function 
        //  You need to re execute the key functions 
        test()
    })
}

test : modify test.js

You can see that after the modification , Just reload test.js, Other files were not reloaded . 

Be careful :

HMR Functional pair js Handle , Only non entrances can be handled js Other documents of the document . Because the entry file will introduce other dependencies , There is no way to avoid reloading other dependencies due to changes in the entry file .

HTML file

Although the hot update is turned on , But modify index.html Contents of the file , The page does not automatically update .

 html Default cannot use HMR function . Turn on HMR After the function, it will cause problems :html The file cannot be refreshed automatically .

solve : stay webpack.config.js The admiral of html Also added to the entrance , Re execution npx webpack-dev-server command .

take html After adding to the entrance , Turn on HMR After the function , Revise html When you file , The browser will automatically refresh . And you will find that all logs have been reprinted , In other words, the project is reloaded , It's not what we want to just modify html file .

explain :HMR Hot update is a module change , Just repackage this one file , For example, there are n individual js file , One of them js change , Just repackage this one js file , Other (n-1) One file remains unchanged . and html only one , also hmtl Files have also been added to the entrance , So once html change , So content reloading is normal .html The file does not need to be done HMR function .

copyright notice
author[Celester_ best],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270238519190.html

Random recommended