Multi-entry Webpack hot update fails?

Preface

Webpack must be quite familiar to modern front-end developers. In many projects, it is widely used, and webpack-dev-server , I believe everyone should have been exposed to it. Recently, the author is configuring multi-entry, hot update is good for single-entry, but it turns out that multi-entry is not good? , And then searched for the answer through Google, and found an article issue , HMR not working with multiple entries , similar to my question, it seems that there is a BUG? See the author's reply

v4 fixes the problem, I lost it, I'm still using v3, look at the v4 document

At this time, there is only one feeling, how long is the hot update, there shouldn't be multiple entrances, is there a problem with hot update? After upgrading to v4, it still doesn't work. At that time, I got angry and I just looked at the source code. Before looking at the source code, we must first have a basic understanding of what a hot update is.

Module hot update

Hot Module Replacement refers to replacing, adding or deleting modules during the running of the browser without reloading the entire page.

• Keep the application state lost during a full page reload
• CSS/JS in the source code will immediately update in the browser, and only update the changed content, saving development time

Compared with the Live Reload solution, HMR embodies its strength, real-time module hot refresh and application status, which greatly improves the development efficiency and development experience.

Enable module hot update

HMR is very simple. The configuration of webpack.config.js file with hot update function is as follows:

const path = require('path');

module.exports = {
    // ...
    entry: {
        app: ['./src/index.js']
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        hot: true,
        historyApiFallback: true,
        compress: true
    }
};

src/index.js

if (module.hot) {
    module.hot.accept();
}

principle

There are many articles on the Webpack hot update of 060c802ad06c3f on the Internet, so I won’t describe them in detail here, but I recommend a few.

• module hot update
• easily understand the principle of
• Webpack HMR principle analysis

debugging

npm link

$ git clone https://github.com/webpack/webpack-dev-server.git

Be sure to find the version of the package corresponding to your project, condemnation Oh, otherwise it will error, the webpack-dev-server after the project pulled down, try webpack-dev-server/lib/Server.js add a line to the file console.log

Then enter the root directory

$ cd webpack-dev-server
$ npm link

Generate soft chain

cd 项目地址
npm link webpack-dev-server

After the link is successful, you will be prompted to change the webpack-dev-server address

jiang@JiangdeMacBook-Pro-3 commonVideoClient % cnpm link webpack-dev-server
/Users/jiang/Desktop/commonVideoClient/node_modules/webpack-dev-server -> /usr/local/lib/node_modules/webpack-dev-server -> /Users/jiang/Desktop/webpack-dev-server

webpack-dev-server in the project, you should see the corresponding output in the console, it is very convenient to debug the source code.

npm link solution, the third-party libraries and projects belong to different projects. They have their own node_modules . If the third-party libraries and projects use the same dependency, they will be checked node_modules
Find, if this dependency does not support multiple cases, the application will be abnormal.

yalc

When developing and authoring multiple packages (private or public), you often find that you need to use the latest/WIP version in other projects you are working on in your local environment without publishing these packages to a remote registry. NPM and Yarn use a similar symbolic link package (npm/yarn link) method to solve this problem. Although this may be effective in many situations, it often brings annoying constraints and dependency resolution, symlink interoperability between file systems, and other issues.

Install yalc globally

npm install -g yalc

Generate yalc package

$ cd webpack-dev-server
$ yalc publish

You can find the corresponding package in your local /Users/jiang/.yalc/packages/webpack-dev-server

cd 项目地址
yalc link webpack-dev-server

.yalc , you can find 060c802ad06fd2 under your own project

Every time you manually modify the code of a third-party library, you need to manually link, which is very troublesome, right? ok, the artifact is coming, nodemon ,

npm install -g nodemon

nodemon
--ignore dist/
--ignore node_modules/
--watch lib # 观察目录
-C # 只在变更后执行，首次启动不执行命令
-e js,ts,html,less,scss 监控指定后缀名的文件
--debug # 调试
-x "yalc publish" 自定义命令

Then, let's try this tool. In webpack-dev-server , add three lines of executable commands

Run npm run watch , and every time you modify it, it will update automatically. Isn’t it very comfortable?

<img width="119" alt="WeChat7c8e2813667093e82dc47a836e6d5cdb" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fcceba8aa0543799b4e897141912f13~tplv-k3u1fbpfcp-zoom-1.image">

Web page debugging

Find the corresponding file location and number of lines of code, and perform breakpoint debugging through the browser. This will not be discussed further.

Find the problem

After some tossing, I upgraded webpack-dev-server@v4 , analyzed the principle, debugged the source code, and compared it with the normal single-page application before, and found that it was normal or not. I was depressed. Why? Suddenly, I realized, it seems that the multi-page application is not in the entrance module.hot

app.jsx previously written in module.hot

module.hot in the entry file

ok, success, happy Dapuben.

to sum up

With questions, reading the source code is the most efficient, so you won’t get bored while reading the source code, because you are going to look at the source code only if you want to solve the problem. For the code you don’t understand, you need to debug bit by bit. Going on step by step, and combining with some of the existing principles (standing on the shoulders of giants) will find the answer. This experience is also very interesting, thank you friends for reading, you can give a thumbs up if you like it 🌟~