webpack official website: webpack official website
1. What is webpack?
This webpack is really not one or two sentences that can be said clearly.
Official explanation:
At its core, webpack is a static module bundler for modern JavaScript applications.
Translation: In essence , webpack is a static module bundler for modern JavaScript applications .
Official website Illustration:
split open to understand what it is webpack modules and packaged
front-end modular:
I think we all know why modular front-end needs.
Some of the solutions currently using front-end modularization are: AMD, CMD, CommonJS, ES6.
Before ES6, if we wanted to carry out modular development, we had to resort to other tools so that we could carry out modular development.
And after completing the project through modular development, it is also necessary to deal with the various dependencies between the modules, and to integrate and package them.
One of the core of webpack is to make it possible for us to carry out modular development and to help us deal with the dependencies between modules.
And not only JavaScript files, our CSS, images, json files, etc. can all be used as modules in webpack.
This is the concept of modularity in webpack.
How to understand packaging?
After understanding that webpack can help us modularize and deal with various complex relationships between modules, the concept of packaging is very easy to understand.
That is, the various resource modules in webpack are packaged and merged into one or more bundles (Bundles).
And in the process of packaging, you can also process resources, such as compressing pictures, converting scss to css, converting ES6 syntax to ES5 syntax, converting TypeScript to JavaScript, and so on.
But it seems that grunt/gulp can also help us with the packaging operation. What is the difference between them?
The core of grunt/gulp is Task.
We can configure a series of tasks and define the tasks to be processed by the task (such as ES6, ts conversion, image compression, scss conversion to css), and
then let grunt/gulp execute these tasks in turn, and let The entire process is automated.
So grunt/gulp is also called a front-end automated task management tool.
Let's look at a gulp task.
The task below is to convert all js files under src into ES5 syntax.
And finally output to the dist folder.
When should I use grunt/gulp?
If your project module dependency is very simple, even the concept of modularity is not used.
Just use grunt/gulp for simple merging and compression.
But if the entire project uses modular management, and the interdependence is very strong, we can use a more powerful webpack.
So, what is the difference between grunt/gulp and webpack?
grunt/gulp puts more emphasis on the automation of the front-end process, and modularity is not its core.
Webpack puts more emphasis on modular development and management, and functions such as file compression and merging, preprocessing, etc., are his accompanying functions.
Of course, it is enough to know and understand the above words. Gulp uses fewer people and has many compatibility issues for the environment. It can't be compared with webpack's one-stop solution to the problem. In actual work, webpack dominates the world. Enter the installation below:
To install webpack, you first need to install Node.js, Node.js comes with the package management tool npm
node.js installation refer to other bloggers: add link description
Check your node version: keyboard win+r to open cmd, directly enter node -v, the installed version number appears
Install webpack globally (here I will specify the version number 3.6.0 first, because vue cli2 relies on this version)
Here, if you have to install the latest version, version 4 or higher (to this article release, version 4.44.2) Following the installation process, there will be an error in the terminal with red letters,
don’t panic, just copy and paste all the red and yellow letters into csdn to search, there will be a solution, I just can’t find my browsing history, otherwise I must take a screenshot
Partial installation of webpack (needed later)
--save-dev` is a dependency during development and does not need to be used after the project is packaged.
Why is it necessary to install locally after the global installation?
Execute the webpack command directly in the terminal, and use the globally installed webpack.
When scripts are defined in package.json, which contains the webpack command, then the local webpack is used.
We create the following files and folders:
file and folder analysis:
dist folder: used to store the files that will be packaged later.
Src folder: used to store the source file we wrote.
main.js: the entry file of the project. See details below for specific content.
mathUtils.js: defines some math tool functions, which can be referenced and used elsewhere. See the details below for specific content.
index.html: the home page displayed by the browser. html
package.json: generated by npm init and managed by the npm package (not used for the time being, and will be used later)
Code in the mathUtils.js file:
main.js file Code in:
Now the js files are developed in a modular way, can they be used directly? Not possible.
Because if these two js files are directly imported into index.html, the browser does not recognize the modular code.
In addition, when there are many such js files in a real project, it is very troublesome for us to quote them one by one, and it is very inconvenient to manage them later.
What should we do? Use webpack tool to pack multiple js files.
We know that webpack is a modular packaging tool, so it supports writing modularity in our code and can process modularized code.
In addition, if you package multiple js into one js file after processing the relationship between all modules, it becomes very convenient to import.
OK, how to pack it? Use the webpack command to
display the following code, indicating that the installation is successful.
Version 4 and above may be like this:
After packaging, a bundle.js file will be generated under the dist file. The
content of the file is a bit complicated. analysis.
The bundle.js file is a js file generated after webpack processes the direct file dependencies of the project. We only need to include this js file in index.html.
Let's think about it. If you need to write the entry and exit as parameters every time you use a webpack command, it is very troublesome. Is there a way to write these two parameters into the configuration and read them directly at runtime?
Of course, it is to create a webpack.config.js file.
Currently, the webpack we are using is global webpack. What if we want to use local packaging?
Because a project often depends on a specific webpack version, the global version may be inconsistent with the webpack version of this project, and there is a problem with export packaging.
So usually a project has its own partial webpack.
The first step is to install your own partial webpack in the project.
Here we let the partial installation of webpack 3.6.0
Vue CLI3 has been upgraded to webpack4, but it hides the configuration file, so it is not very convenient to view.
The second step is to start webpack packaging through node_modules/.bin/webpack
Startup is defined in package.json
However, is it inconvenient to type such a long list every time it is executed?
OK, we can define our own execution script in the scripts of package.json.
When the scripts of scripts in package.json are executed, they will find the positions corresponding to the commands in a certain order.
First, it will look for the corresponding command in the local node_modules/.bin path.
If it is not found, it will look for it in the global environment variables.
How to execute our build command?
Use of css-loader
What is a loader?
Loader is a very core concept in webpack.
What is webpack used for?
In our previous example, we mainly used webpack to process the js code we wrote, and webpack would automatically handle the dependencies between js.
However, in development, we not only only have basic js code processing, we also need to load css, pictures, but also some advanced ES6 to ES5 code, TypeScript to ES5 code, and scss and less to css. Convert .jsx and .vue files into js files and so on.
For the capabilities of webpack itself, these conversions are not supported.
then what should we do? Just extend the corresponding loader to webpack.
The loader usage process:
Step 1: Install the loader that needs to be used through npm
Step 2: Configure under the modules keyword in webpack.config.js
Most of the loader can be found on the webpack official website, and learn the corresponding usage.
During the project development process, we inevitably need to add a lot of styles, and we often write styles in a separate file.
In the src directory, create a css file, which creates a normal.css file.
We can also reorganize the file directory structure and place scattered js files in a js folder.
The code in normal.css is very simple, that is, the body is set to red.
But at this time, will the styles in normal.css take effect?
Of course not, because we didn't quote it at all.
It is also impossible for webpack to find it, because we only have one entry, and webpack will start looking for other dependent files from the entry.
Quoting in the entry file:
repackaging, the following error will appear:
This error tells us that there must be a corresponding loader to load the normal.css file.
In the official webpack, we can find the following loader usage methods for styles:
follow the official configuration webpack.config.js file.
Note: There is a style-loader in the configuration, we don’t know what it is, so we don’t need to configure it for now. .
Repackage the project:
But, run index.html, you will find that the style does not take effect.
The reason is that css-loader is only responsible for loading css files, but is not responsible for embedding css specific styles into the document.
At this time, we still need a style-loader to help us handle it.
Let's install style-loader.
Note: style-loader needs to be placed in front of css-loader.
But according to our logic, in the process of processing css files, css-loader should first load css files, and then style-loader will perform further processing. Why put style-loader in front?
This is because when webpack reads the loader used, it reads in the order from right to left.
Currently, the configuration of webpack.config.js is as follows.
If we want to use less, scss, and stylus to write styles in the project, can webpack help us to deal with it?
We take less as an example here, and the others are the same.
Let's create a less file first, and still put it in the css folder
Continue to search in the official website, we will find the instructions related to less-loader.
First, you still need to install the corresponding loader.
Note: We also install less here, because webpack will use less to compile the less files.
Secondly, modify the corresponding configuration files.
Add a rules option for processing .less files.
First come to this later and then update. . .