Webpack,

directory

1. Know webpack

2. Install webpack

3. The webpack start

4. Webpack configuration

5. The use of loder

6. Configure vUE in webpack

7. The use of pulugin

8. Build local Fuwuqi

■ What is Webpack?

This Webpack is really not one or two words can be explained.Copy the code

■ Let’s start with the official explanation:

At its core, webpack is a static module bundler for modern JavaScript applications. Essentially, WebPack is a static module packaging tool for modern JavaScript applications.Copy the code

■ But what is it? Explaining concepts in terms of concepts is still not clear. Let’s explain the above statement in terms of two points: modules and packaging

■ Front-end modular:

I’ve spent a lot of time explaining why the front end needs to be modular.

I also mentioned the current examples of front-end modularity: AMD, CMD, CommonJS, ES6.

Before ES6, if we wanted to do modular development, we had to resort to other tools that allowed us to do modular development.

And after completing the project through modular development, it is also necessary to deal with various dependencies between modules, and the group will integrate the chess package.

One of the core aspects of WebPack is that it makes modular development possible and helps us deal with dependencies between modules.

And not just JavaScript files, our CSS, images, JSON files, etc. can be used as modules in Webpack

■ How to understand packaging?

The concept of packaging is easy to understand now that you understand how WebPack can help you modularize and deal with the complex relationships between modules.

It is to Bundle various resource modules in webpack into one or more bundles.

In the process of packaging, you can also manipulate resources, such as compressing images, converting SCSS to CSS, converting ES6 syntax to ES5 syntax, converting TypeScript to JavaScript, and so on.

But grunt/gulp also seems to help us with packaging. What’s the difference?

Comparison of grunt/gulp

The core of Grunt /gulp is Task

We can configure a series of tasks, define the tasks to handle (e.g. ES6, TS conversion, image compression, SCSS conversion to CSS) and then have grunt/gulp execute these tasks in sequence and automate the process. Grunt/GULP is also called a front-end automated task management tool.Copy the code

Let’s look at a Gulp task

The following task is the syntax for converting all js files under SRC to ES5. And finally output to the dist folder.Copy the code

When to use grunt/gulp?

If your engineering module relies very simply, it doesn't even use the concept of modularity. Grunt /gulp is used for simple merge and compression. But if the whole project is modularized and there's a lot of interdependencies, then we have to -- so,Copy the code

What’s the difference between Grunt /gulp and Webpack?

Grunt/GULP puts more emphasis on automation of front-end processes and modularity is not at its core. Webpack more emphasis on modular development management, and file compression merge, pre-processing and other functionsCopy the code

The installation of the webpack

Node.js is installed on the webpack server. Node.js is installed on the webpack server.

Install webpack globally (I specify version 3.6.0 first because Vue CLI2 depends on that version)

Partial installation of Webpack (required later)

--save-dev" is a development-time dependency that does not need to be used after the project is packaged.Copy the code

Why do you need a local installation after a global installation?

When scripts are defined in package.json that contains the webpack command, local Webpack is usedCopy the code

The preparatory work

We create the following files and folders:

Dist folder: SRC folder: used to store the source file we wrote main.js: the entry file of the project. Mathutils.js defines mathematical utility functions that can be referenced and used elsewhere. HTNL package.json: a file generated by NPM init and managed by NPM package.Copy the code

Code in the mathutils.js file

The code in the mainjs file:

Js’s packaging

Is files are now developed in a modular way, can they be used directly? You can.

Because if you import these two IS files directly in index.html, the browser will not recognize the modular code in them. In addition, when there are many such JS files in a real project, it is very troublesome to reference them one by one, and it is very inconvenient to manage them in the rough stage.Copy the code

What should we do? Use the Webpack tool to package multiple IS files.

As we all know, WebPack is a modular packaging tool, so it allows us to write modules in our code and process modular code. In addition, it is very convenient to pack multiple JS files into a SINGLE JS file after handling all the relationships between modules.Copy the code

OK, how do you pack it? Using the webpack directive is ah

Use the packaged file

This will generate a bundeJS file in the dist file

The content of the file is somewhat complicated, so I will not look at it for the time being and analyze it later. The bundlejs file is a file generated by Webpack after handling the project's direct file dependencies. We just need to import the I file into the index HTMLCopy the code

Entrance and exit

To write these two parameters to the configuration and, at runtime, read them directly?

Let's consider that it would be very troublesome to write entry and exit parameters every time we use webpack. Is there a way to write these parameters to the configuration and, at runtime, read them directly? Of course, create a webpack.config.js fileCopy the code

Local installation and global installation

Currently, the Webpack we use is global webpack, what if we want to use local packaging?

Because a project tends to rely on a specific Webpack version, the all-curium version may be very different from the webpack version of the project. The export packaging fails. Procedure So usually a project has two local Webpacks.Copy the code

Step 1, the project needs to install its own local Webpack

Vue CLI3 has upgraded to webpack4, but it hides the configuration file, so it's not very easy to view.Copy the code

The second step is to start webpack packing with node_ modules/.bin/webpack

Customization in package.json

However, is it inconvenient to type a long list every time you execute it?

OK, we can define our own execution scripts in the scripts of package.json.Copy the code

When executed, scripts in package.json look for commands in a certain order.

First, it looks for the corresponding command in the local node_modules /. Bin directory. If no command is found, it looks for the global environment variable. How do we execute our build directive?Copy the code

What is the loader

Loader is a very core concept in Webpack.

What does webpack do?

In our previous example, we mainly used WebPack to process the JS code we wrote, and the crude WebPack handles the dependencies between js automatically. However, in development we don't just need basic JS code. We also need to load CSS and slices, including advanced conversion of ES6 to ES5, TypeScript to ES5, SCSS and less to CSS, JSX and.vue files to JS files, and so on. For webPack's own capabilities, these transformations are not supported. So what to do? Webpack extension to the corresponding loader can be done.Copy the code

Loader usage process:

Step 1: Install the loader using NPM. Step 2: Configure modules in webpack.config.jsCopy the code

Most of the loader can be found in webpack’s official website, and learn the corresponding usage.

CSS file handling – Preparation

During project development, we have to add a lot of styles, and styles are often written in a separate document

In the SRC directory, create a CSS file, including a normal. CSS file. We can also reorganize the directory structure of the files, putting the scattered JS files in a SINGLE JS folderCopy the code

The code in normal.css is very simple, which is to set the body to red

But will the styles in normal.css take effect at this point?

Of course not, because we don't use ta Webpack at all and we can't find it because we only have one entry and WebPack will find other dependent files from that entryCopy the code

Reference in the entry file

CSS file handling – Packaging error message

Repackage, the following error occurs

This error tells us that the normal. CSS file must have a corresponding loader.

CSS file processing – CSS-loader

In the official webpack, we can find the following loader usage of styles:

Follow the official configuration of the webpack.config.js file

Note: There is a style-loader in the configuration, we don't know what it is, so we can leave it out for now.Copy the code

Repackage items:

However, run index.html and you’ll see that the style doesn’t work.

The reason is that CSS-loader is only responsible for loading CSS files, but it is not responsible for embedding CSS-specific styles into documents. At this point, we also need a style-loader to help us process.Copy the code

CSS file processing -style-loader

Install style – loader

Note: Style-loader must be placed before CSS-loader.

Doubt: Right? According to our logic, in the process of processing CSS files, csS-loader should carry out further processing, why loader to carry out further processing, why will style-loader in front of it?

Answer: This time because webpack reads the loader in right-to-left order.

Currently, webpack.config.js is configured as follows:

Less file processing – Preparation

If we want to use less, SCSS stylus to write styles in our projects, can webpack help us with that?

Let's take less as an example here, and the rest is the same.Copy the code

Let’s create a less file and keep it in the CSS folder

Less File processing

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 have less installed here, because WebPack uses less to compile less filesCopy the code

Next, modify the corresponding configuration file

Add a rules option for processing.less filesCopy the code

First, we added two images to the project:

A smaller image test01.jpg(less than 8KB) and a larger image test02.jpeg(greater than 8KB)Copy the code

We’ll do different things with these two images later

Let’s consider referencing images in CSS styles first, so I changed the styles in normal.css:

If we package directly, the following situation will occur

Image processing URl-loader

Figure processing, we use url-loader to process, still install url-loader first

Modify the webpack.config.js configuration file:

Pack it again, run index.html, and we’ll see that our back image is selected.

If you look closely, you'll notice that the background image is displayed in Base64 as 0K, which is where the limit attribute comes in. When the image is 8KB, it's base64 encodedCopy the code

Image processing file-loader

So the question is, what if it’s bigger than 8 kilobytes? Let’s change the background image to test02.jpg

This time, pictures larger than 8KB will be processed by file-loader, but there is no file-loader in our projectCopy the code

Therefore, we need to install file-loader

Once again, you’ll find an extra image file in the dist folder

Image file processing – Modify the file name

We found that WebPack automatically helped us generate a very long name

This is a 32-bit hash value to prevent duplication of names but, in real development, we might have some requirements for packaging image names such as putting all images in a folder with the same name as the original image, but also to prevent duplicationCopy the code

Therefore, we can add the following options in options:

Img: folder to which the file is to be packed Name: Get the original name of the image and place it in that location Hash :8: To prevent image name conflicts, we still use hash, but we only keep 8 bits Dext: use the original extension of the imageCopy the code

However, we find that the image is not displayed because the image is using the wrong path

By default, WebPack returns the generated path directly to the user, but our entire application is packaged in the dist folder, so we need to add another dist/ to the pathCopy the code

ES6 syntax processing

If you read the WebPack js files carefully and see that the ES6 syntax is not translated to ES5, it means that some browsers that do not support ES6 will not be able to run our code well.

If you want to convert ES6 syntax to ES5, you need to use Babel.

In Webpack, we simply use the loader corresponding to Babel.Copy the code

Configure the webpack.config.js file

Repackage, look at the bundle.js file, and see that the content has become ES5 syntax

The introduction of vue. Js

In the project, we will use Vuejs for development, and Zu will organize vUE components in special files.

Let's learn how to integrate Vuejs in our WebPack environmentCopy the code

Now, if you want to use Vuejs in your project, you need to have a dependency on it, so you need to install it first

Note: Since we will use VUE later on in real projects, it is not a development-time dependencyCopy the code

Difference between EL and elenment

Once it’s up and running, let’s consider another question:

If we want to display data from data in the interface, we have to modify the index. HTML. If we customize the component later, we have to modify the index. HTML to use the component. But the HTML template is later in the development, I don't want to manually modify it frequently.Copy the code

Define the template attribute:

In the previous Vue instance, we defined the el attribute to bind to #app in index. HTML so that the Vue instance can manage its contents later. In this case, we can delete the {{message}} content from the div element. Just keep a basic div element, but what if I still want to display {{message}} in it? We can define another template property as follows:Copy the code

Differences between EL and Elenment (II)

Repackage it, run it, display the same result and HTML structure so what’s the relationship between el and template?

In our previous studies, we learned that el is used to specify the DOM to be managed by the Vue, helping parse instructions, event listeners, and so on. If template is also specified in the Vue instance, the contents of the template will replace the template corresponding to the mounted EL.Copy the code

What’s the good of that?

This way we don't need to manipulate index.html again in future development, just write the corresponding tag in the templateCopy the code

But what if writing the template module is cumbersome?

It doesn't matter, we will extract the contents of the template template later. It is written in three parts :template, script, and style, and the structure becomes very clear.Copy the code