foreword
Let's understand, what exactly is webpack? Why is there this thing? Mainly, our project development in any language will divide our project code into many modules in order to ensure maintainability. In the web front-end vue development mode, these management modules are our webpack.
Of course, this also provides many other additional functions. As long as we have an in-depth understanding, we can know that the front-end engineering has to develop the code behind it. A short list of our other extra features:
1. What is webpack
What is webpack? When we are developing our project, writing object-oriented code will lead to a problem of bloating your functions, that is, the code will be crowded into a folder, which makes a function particularly bloated. In terms of maintenance, maintenance is difficult or even impossible to maintain, so generally when we develop a project, we will divide the project into many files, and then introduce them into the index file, which is to facilitate later maintenance, and find any files that have problems. Which file is fine.
But correspondingly, since it needs to be divided into multiple files, the page needs to load many files, which is equivalent to introducing multiple <script>s in one file, which will cause performance impact on execution.
If we can import in the way of import, we can ensure that the page html wisdom is only a file, and the pterosaur loan of the file is also very clear.
Second, the module module packaging tool
Note: At this point, the webpack we will not be regarded as a js translator in the overall sense, because webpack only knows import syntax, it does not know other advanced js syntax, so webpack is just a module packaging tool.
1. How to install webpack
We can think of the same way of installing vue. In the same way, the installation of these tools is in compliance with the node specification, and the npm init initialization file can be used to comply with the specification.
We do not recommend installing webpack globally here, because the version is fixed, because different projects we develop will use different webpacks for packaging. If it is recommended here, that is, we can install our webpack through --save-dev in each project.
npm install html-webpack-plugin --save-dev
或
npm install [email protected] -g
或
cnpm install [email protected] -g2. Use the webpack configuration file
Note: Our different files are packaged differently. The js file needs to be imported. If it is an image, it can be imported directly. And the entry file needs to be given, which is to specify how the configuration file should be written. The name of our configuration file has been given to us in vue----"webpack.config.js
We don't need to add npm here because script configures our project in the project, and we will find webpack from the project first. Then the role of webpack-cli is to allow us all to run our webpack instructions on the command line.
Let's take a look at what the output of this webpack package is:
We can see that each file named chunk represents each js file, and chunknames is the named name specified during configuration.