preface

Webpack is quite familiar to modern front-end developers. It is widely used in many projects, and webpack-dev-server is believed to be familiar to everyone. Recently, the author in the configuration of multi-entry, hot update in a single entry is good, the result of the multi-entry is not good? “, I searched for the answer through Google and found an issue “HMR not working with Multiple entries”, which was similar to my question, as if there was a real BUG? See the author’s reply

V4 fixed this issue, I lost it, I’m still using V3, check v4 documentation

At this point, there is only one feeling, hot update how long things, should not exist multiple entry, hot update is a problem? Upgrade to V4, or not, at that time I this temper up, directly look at the source. Before looking at the source code, it’s important to have a basic understanding of what hot updates are.

Module hot update

Hot Module Replacement is when a Module is replaced, added, or removed while the browser is running without having to reload the entire page.

  • Preserve application state that is lost during a full page reload
  • In the source codeCSS/JSChanges are immediately updated in the browser, and only the changed content is updated, saving development time

Compared with the Live Reload scheme, HMR demonstrates its strength. The real-time module thermal refreshes and saves the application state, which greatly improves the development efficiency and experience.

Enable module hot update

The configuration of a webpack.config.js file with hot update capability 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
    }
};
Copy the code

src/index.js

if (module.hot) {
    module.hot.accept();
}
Copy the code

The principle of

There are many articles about the principle of Webpack hot update on the Internet, here will not describe in detail, recommend a few.

  • Module hot update

  • Easy to understand the webpack hot update principle

  • Webpack HMR principle analysis

debugging

npm link

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

Add console.log to the webpack-dev-server/lib/ server. js file after pulling the webpack-dev-server project down, try adding console.log to the webpack-dev-server/lib/ server. js file

Then go to the root directory

$ cd webpack-dev-server
$ npm link
Copy the code

Generate the soft chain

CD Project address NPM link webpack-dev-serverCopy the code

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-serverCopy the code

Then run webpack-dev-server in the project, and you should see the corresponding output in the console. Debugging source code is very convenient.

In NPM Link, the third-party library and project belong to different projects, and they have their own node_modules. If the third-party library and project use the same dependency, they will look for it in their own node_modules. If the dependency does not support multiple instances, the application will fail.

yalc

When developing and authoring multiple packages (private or public), you often find yourself needing to use the latest /WIP versions in other projects you are working on in your local environment without having to publish those packages to a remote registry. NPM and Yarn solve this problem using a similar symbolic link package (NPM/Yarn Link) approach. While this can work in many cases, it often introduces annoying constraints and dependency resolution, symbolic link interoperability between file systems, and more.

Install YALC globally

npm install -g yalc
Copy the code

Generate yalc package

$ cd webpack-dev-server
$ yalc publish
Copy the code

Can in your local/Users/jiang /. Yalc/packages/webpack – dev – server, find the corresponding package

CD Project address yalc link webpack-dev-serverCopy the code

After link, you can find.yalc under your own project

Every time you manually modify the third-party library code, you need to manually link, which is very troublesome, right? Okay, the artifact is here, Nodemon,

NPM install -g nodemon nodemon --ignore dist/ --ignore node_modules/ --watch lib -e js,ts, HTML,less, SCSS monitors files with specified suffixes --debug # debug -x "yalc publish" custom commandCopy the code

Then, let’s try out the tool, adding three lines of executable commands in webpack-dev-server

Run NPM Run Watch and update it automatically every time you make a change.

Web debugging

Find the location of the file and the number of lines of code, and use the browser to debug breakpoints.

Find the problem

After some toss and toss, upgrade webpack-dev-server@v4, principle analysis, source debugging, and before the normal single page application comparison, found that are normal, or not, I am depressed, why? All of a sudden, IT dawned on me that the multi-page app didn’t module.hot in the entry

Module.hot in app.jsx

Change the entry file to module.hot

Ok, success, happy big pu Ben.

conclusion

With a question, read the source code is the most efficient, so that you are in the process of reading the source code will not feel boring, because you are to solve the problem, will go to the source code, for don’t understand the code, debugging, bit by bit, step by step, combining the principle of the existing articles (standing on the shoulders of giants) will find the answer. This experience is also very interesting, thank you for reading, like you can click a thumbs-up oh 🌟 ~