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 code
CSS/JS
Changes 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 🌟 ~