Bloggers learn Webpack not because they need it, but because webpack is popular now and they want to learn about it and see if it’s useful for their current projects. In the end, after thinking about the role of the current project is not big, but summarized webpack suitable for the use of several scenarios

1. Projects with separate front and back ends, like Vue, Angular, and React, all use WebPack. There are three major frameworks (Vue, React, Angular) that provide the foundation for the separation of the front and back ends, allowing many interfaces to do template rendering without using template rendering on the back end. To be honest, if the front end can’t do the template rendering itself, a lot of requirements are really troublesome to implement, such as the list, without template rendering, you need to write a string of JS code to implement the list loop, now just need to add a few attributes can be implemented. Because the project of the blogger is not separated from the front and back end, the framework is used for rendering, so I feel that the role of Webpack is not particularly big, and it is more troublesome to maintain.

2. Mixed application development: Ionic uses WebPack to compile TS, which greatly facilitates development. With a little bit of webpack, you can start the service automatically and refresh the browser automatically when code changes are detected. It is very convenient

3.SPA application (single page application), for this personal feeling is very cool, Webpack a lot of files into a file, not only reduce the workload of developers but also solve the problem of the number of requests, think happy.

If there are other use scenarios, please put forward water friends, I will supplement


This article is only about the introduction of Webpack and some pits, and there are not many things for those who need to improve. Because I don’t use Webpack much in my own project, I don’t want to spend too much experience to make Webpack too deep, but I hope others can at least know something about webpack. Not even today’s lofty Webpack do not understand, ha ha.



Why does WebPack stand out among packaging tools?

Here I will highlight the advantages of WebPack by comparing Gulp with Baidu’s FIS.

Gulp. Since gulp was defeated by webpack, there must be something worse than people. The biggest problem with traditional gulp packaging is that it cannot be packaged on demand, let alone loaded on demand, because the traditional packaging idea is to traverse the source file => match rules => package/process, that is to say, as long as the rule is matched, Even modules that are not needed by the program are packaged mindlessly, the fundamental reason being that on-demand is not described by rules, but only by program logic.

Baidu FIS: In fact, there is no solution before Webpack. The most proud part of Baidu FIS is that it solves this problem, and it is a perfect solution in theory. I feel that its biggest disadvantage is that it needs the cooperation of the back end, but you know, the back end usually does not care about this demand, so Baidu FIS will not be solved.

This means that Not only can WebPack be loaded on demand, it doesn’t rely on backend development, and of course WebPack also enables subcontracting development. Webpack can implement these entry files that are inseparable from its packaging logic => analyze code => find dependencies => package. In other words, files that are not referenced in the entry file will not be packaged in, so it is simple to achieve the load on demand, this is the road to simplicity. This is where Webpack is most valuable.


Webpack entry:

To use Webpack, you need to have WebPack on your computer first, then you need to install WebPack (make sure you have NPM installed first) :

1. Initialize a project (you can use webpack without this, but few webpacks exist independently of NPM, so I’m not going to be special)

npm initCopy the code

2. To install the latest version or a specific version, run one of the following commands:

npm install --save-dev webpack
npm install --save-dev webpack@<version>Copy the code

3. If you are using WebPack 4 or later, you will also need to install the CLI.

npm install --save-dev webpack-cliCopy the code

Note: there is a trap here, Webpackage 4 has implemented zero configuration, Webpackage 3 has not implemented, and most of the documents on the Internet are before 4, resulting in the operation of their steps will be wrong. Reading other people’s blogs is only good for quick reading and comprehension. For first-hand information, go to the website. The official website of Webpack is very complete, and the Chinese version and English version are provided, but the Chinese translation is not complete, many of them are 404 errors, it is suggested to read the English version directly, those who are not good at English can use the translation with Google Browser. This error is mainly caused by not finding files in the SRC folder, because webpack’s default entry file is specified under SRC. I was going to give you a screenshot, but I found that the package can be packaged directly without putting it in the SRC folder. Maybe it is webPack compatible.

4. Create the webpack.config.js file in the root directory

5. Configure webpack.config.js(it is possible to package webpack.config.js without configuring this file, but I will not explain this here, because it is important to record the configuration, no matter how simple it is.



Introduction webpack understanding of entry, the module, the plugins, the output will be enough. The simplest WebPack configuration requires only entry.

This file contains any configuration you want to reference. When you use the Webpack command, all the files referenced in this file will be packaged into a JS file (here only JS files) in json key-value pair format. The name on the left, the file on the right. Configuring multiple means you want to bundle multiple files together

Note: the name of the blogger is index/login, which is for a special purpose and will be explained in output

-Serena: What’s the name of the file you want to put in your output? Filename filename,path, file path, publicpath used to configure the corresponding domain name.

If you write index/login, the generated file name is index/login.bundle.js. When it is placed in the path directory specified by you, an index folder will be automatically generated to achieve the function of folder division. Is not quite black technology.

Module: Webpack can only package JS, it does not recognize CSS, files, images and so on. To recognize these things, you need to configure rules for the Module. The most common parameter is: text, matching rule. The /\.css$/ in the text represents matching files that end in CSS. Use: indicates the loading method, and the following parameter indicates the loading method. If specified incorrectly, the packaging error will be caused. For example, style-loader is used for CSS, of course, the loading method is dependent on plug-ins. You need to download the style-loader and CSS-loader plug-ins via NPM (NPM is not popular here).

Plugins: You specify plugins by name. Webpack provides plugins that allow you to do all sorts of things, but this is not a summary


Webpack has a lot more functionality and complexity than that, and the content in the article isn’t particularly polished, and many of the more interesting things don’t know how to express them. However, I still need to write it down, in case it helps you, I will make money. For bloggers, as a bad pen, I will quickly pick up and use it when I use it later.


Finally, here are a few articles that bloggers feel great about learning Webpack. If you don’t read this article, be sure to read the following:

Webpack official website, you can step by step according to this operation, to achieve packaging

Explanation of webpack usage scenarios

Many tips for Webpack (not written directly, but can be dug out of it, great!) Inside is a series of articles.