This is the 24th day of my participation in The August More Wen Challenge.

Writing in the front

Webpack is a must in front-end engineering nowadays, so why do we need webPack in our project? Let me take a look.

The body of the

Looking at an image from webPack’s official website, you can clearly see that WebPack is primarily used as a packaged build, combining multiple resource files into one.

Webpack is a static module packaging tool for modern JavaScript applications

So why do we need a packaging tool? Look at the following scene

// index.html
<! doctypehtml>
<html>
  <body>
    <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script>
        const result = except(20.5.5); / / 2
    </script>
  </body>
</html>
Copy the code
// a.js
function add(a, b) {
  return a + b;
}
Copy the code
// b.js
function except(c, a, b) {
  return c / add(a, b);
}
Copy the code

This, of course, is an illustrative example of the future. Here, the HTML file introduces two JS files, which have an add method and an except method respectively. The B file relies on the A file, and we can calculate the result of the incoming value by running the except method.

What’s wrong with writing this? Of course, first we introduced two resource files, there is a performance loss; Secondly, the coupling of the two files is too large. If I change the add name in file A, but do not change the add name in file B, the code will run wrong. They ended up being mounted to the Window, which meant I could override variables and methods in the file at will;

The bottom line is that the coupling is too high, the maintenance costs are too high, and modifying one piece of code requires modifying it in multiple files that reference it. Later, there are too many files and HTTP requests.

This requires the tool Webpack, Webpack in the packaging process, will analyze the dependencies between each file, and then generate a JS file, the browser run request this JS file.

conclusion

Using WebPack allows us to focus on development without worrying too much about dependencies, while packaging as a single file reduces the number of HTTP requests and helps with performance.

The front end is long and long. We are all on the road. We hope to communicate with our friends and make progress together. Keep updating ing…..