Learn more about the module packaging tool webpack

1. What is webpack

1. Official explanation

In essence, webpack is a static modular packaging tool for current JavaScript applications. (This sentence can be summarized from two points: modules and packaging )

Let’s talk about the concepts of modules and packaging !

2. Front-end modularization

• Some solutions for front-end modularization: AMD, CMD, CommonJS, ES6 (browsers cannot recognize them, but webpack can be their underlying support before modular development can be carried out)
• Before ES6 , if you want to modularize Development requires the help of other tools so that we can carry out modular development.
• After completing the project through modular development, we also need to deal with various dependencies between modules and integrate and package them.
• At this time, webpack appears. One of the cores is that it allows us to conduct modular development and helps us deal with dependencies between modules.
• Not just JavaScript files, our CSS , images , json files , etc. can all be used as modules in webpack.

3. How to understand packaging?

• Webpack can help us modularize and deal with various complex relationships between modules . The concept of packaging is easy to understand.
• It is to package and merge various resource modules in webpack into multiple packages (Bundle).
• During the packaging process, resources can also be processed , such as compressing images, converting scss to css, and converting ES6 syntax to ES5. Grammar, convert TypeScript to JavaScript and other operations.
• Packaging tools include grunt/gulp.

Comparison between webpack and grunt/gulp.

• The core of grunt/gulp is Task.
  1. You can configure a series of tasks and define the transactions to be processed by the tasks (such as ES6, ts conversion, image compression, scss to css conversion)
  2. Then let grunt/gulp execute these tasks in sequence, and automate the entire process

• to see a gulp task.
  1. The following task is to convert all js files under src into ES5 syntax.
  2. And finally output to the dist folder.
  

• When to use grunt/gulp?
  1. The project module dependencies are very simple, and the concept of modularization is not even used.
  2. Just use grunt/gulp for simple merging and compression.
  3. If the entire project uses modular management and the interdependence is very strong, we can use webpack.

• What is the difference between grunt/gulp and webpack?
  1. grunt/gulp puts more emphasis on the automation of front-end processes, and modularization is not its core.
  2. Webpack places more emphasis on modular development management, and functions such as file compression, merging, and preprocessing are its included functions.

2. Installation of webpack

( wepack must rely on the node environment for normal operation, and the node environment must be required for normal execution. Use the npm tool to manage various dependent packages in node)

• Therefore, to install webpack, you must first install Node.js. Node.js comes with the package management tool npm
• to install webpack globally (npm install [email protected] -g) and
• to install webpck locally. (npm install [email protected] --save-dev) –save-dev is a development dependency and does not need to be used after the project is packaged.

3. Webpack configuration

1. File and folder analysis

• dist folder: used to store files packaged later
• src folder: used to store the source files we wrote
  main.js : The entry file of the project.
  mathUtils.js : Defines some mathematical tool functions that can be referenced and used elsewhere.
  index.html : The browser opens the displayed homepage html (referenced here is the content of the final packaged file in src, that is, the dist folder ).
  package.json : generated through npm init, a file managed by npm package.

The following is the code in the mathUtils.js file and the main.js file: (CommonJS modularization specification, CommonJS is the standard of modularization, nodejs is the implementation of CommodJS (modularization))

2. Command

webpack ./src/main.js ./dist/bundle.js (package the main.js file into a bundle.js file)

Description: In the same way, you can also use the ES6 modular specification

3. Create a webpack.config.js file to simplify the packaging command

(map the packaging command to packaging entry and exit ).

The code in this file:

entry: For the packaged entry

output: We need to obtain the path in the packaged exit

• output dynamically,
• so we can use Node.js syntax to import a module. This module is the file within the quotation marks of path (const path = require ('path') It needs to be found in the node package)
• Use node.js through the npm init command (initialization)
• to generate the package.json file (this file describes the information of the current project) license: "ISC" (open source for the project), the following is package.json Code

description: If you want to use node, you must rely on the package.json file

After running npm install [email protected] --save-dev , the dependencies are added as follows

4. Mapping webpack commands to npm run

In addition to mapping webpack to the entrance and exit , you can also map webpack commands to npm run for some operations (needs to be modified in the **"script"** script tag in package.json). .

4. The use of loader

1. What is loader?

• Loader is a very core concept in webpack.

Now let's think about what webpack is used for?

• We mainly use webpack to process js code, and webpack will automatically handle the dependencies related to js
• . However, during development, it is not only processed by the basic js code, but also needs to load css, images, and some advanced code to convert ES6 to ES5. , convert TypeScript into ES5 code, convert scss and less into css, convert .jsx, .vue files into js files, etc.
• For the capabilities of webpack itself, these transformations are not supported.
• At this time, just extend the corresponding loader to webpack.

2. Loader usage process

1)

Preparation work for css file processing:

1. In the src directory, create a css file, create a normal.css file in it

2. Reorganize the directory structure of the file and put the scattered js files in a js folder

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

4. But the style in normal.css will not take effect at this time, because it is not referenced, and webpack cannot find it, because we only have one entry, and webpack will search for other dependent files starting from the entry.

5. At this time we must reference it in main.js, the entry file

After that we need to import the corresponding loader for use!

• Step 1 : Install the loader you need to use through npm
  (npm install --save-dev css-loader) (npm install --save-dev style-loader)
  In the official website of webpack, find the following method of using loader for styles:
  
  

• Step 2 : Make configuration instructions under the modules keyword in webpack.config.js

: css-loader is only responsible for loading css files , and is not responsible for embedding specific css styles into documents.

At this time, we also need a style-loader help us process

Note: style-loader needs to be placed in front of css-loader.

2) Less file processing

• step 1 : Install the corresponding loader (note: less is also installed here, because webpack will use less to compile the less file). Command: npm install --save-dev less-loader less

• Step 2 : Modify the corresponding configuration file (in webpack.config.js) and add a rules option for processing .less files. as follows:

3) Image file processing

• step 1 : Add two images to the project (one is less than 8kb, the other is greater than 8kb)

• step 2 : first consider referencing the image in the css style, as follows

  

• Step 3 : Modify the corresponding configuration file (in webpack.config.js) and add a rules option for processing image files. as follows:

  

• Step 4 : An error was found after packaging, because images larger than 8kb will be processed through file-loader , but there is no file-loader in our project. (You need to install file-loader , command npm install --save-dev file-loader). After installation and packaging, you will find that there is an additional image file in the dist folder.

  

Description:

• Found that webpack automatically generated a very long name for us

  1. This is a 32-bit hash value to prevent name duplication.
  2. However, in actual development, there may be certain requirements for the name of the packaged image

• . Therefore, we can add the following options in options:

  1. img: the folder to which the file is to be packaged.
  2. name: Get the original name of the picture and put it at this location
  3. Hash8: In order to prevent image name conflicts, hash is still used, but only 8 bits are retained.
  4. ext: Use the original extension of the image as follows:
  

• You also need to configure and modify the path used by the image later

  . 1. By default, webpack will return the generated path to the user.
  2. However, the entire program is packaged in the dist folder, so here you need to add another dist/ to the path.
  as follows:
  

In summary, after packaging, the image file looks like this

4), ES6 to ES5 babel

5. Configure Vue in webpack

• Step 1: Terminal execution command (npm install --save vue)

• Step 2: Import Vue in main.js (import Vue from 'vue') as follows

• Step 3: Hang p on the vue instance in index.html, as follows

• Step 4: An error is found after packaging. We need to specify that the vue we use is the runtime-compiler version.

Specific operations: You need to add resolve to webpack and take an alias ( alias ), as follows:

6. Vue usage in webpack

Step 1: Hang p on the vue instance in index.html

Step 2: Import the APP component into the main.js file , register the APP in the Vue instance , and use the component APP in the Vue template ( componentization )

Step 3: Create the APP.vue file and separate the template of the vue page from the js code and css code , as follows

Step 4: Configure the corresponding loader of vue,

Modify the configuration file of webpack.config.js:

7. Use of plugin

1. Understand plugin

• What is plugin?
  1. Plugin means plug-in, which is usually used to extend an existing architecture.
  2. Plug-ins in webpack are various extensions to the existing functions of webpack, such as packaging optimization, file compression, etc.
• The difference between loader and plugin
  1. Loader is mainly used to convert certain types of modules. It is a converter
  2. Plugin is a plug-in, which is an extension of webpack itself and
• the use process of an extender plugin.
  1. Step 1: Installing through npm requires the use of plugins (some plug-ins already built into webpack do not need to be installed)
  2. Step 2: Configure the plug-in in plugins in webpack.config.js

2. Webpack-Add copyright information Plugin usage

3. Package html plugin

4. js compression Plugin

8. Build a local server

• . Webpack provides an optional local development server . This local server is built based on node.js and uses the express framework internally. It can achieve what we want by allowing the browser to automatically refresh and display the modified results .

• However, it is a separate module. You need to install it before using it in webpck. Command: (npm install --save-dev [email protected])

• devserver is also an option in webpack . The option itself can be set as follows property :
  1. contentBase: Which folder provides local services. The default is the root folder. We need to fill in ./dist here.
  2. port: port number
  3. inline: page refresh in real time
  4. historyApiFallback: In the SPA page, the history mode

• webpack.config.js file configuration that relies on HTML5 is modified as follows:
  

• The –open parameter means opening the browser directly

In addition,

below we want to separate the webpack configuration files: that is, separate the things needed for development and the things used for publishing ( compilation ). as follows:

9. Vue CLI

1. What does CLI mean?

• It is Command-Line Interface, translated as command line interface, but commonly known as scaffolding.
• Vue CLI is an officially released vue.js project scaffolding.
• Using vue-cli, you can quickly build a Vue development environment and corresponding webpack configuration.

2. Prerequisites for using Vue CLI - Node (Node needs to be installed)

However, to use Node, npm must be involved.

What is NPM?

• The full name of NPM is Node Package Manager
• , which is a NodeJS package management and distribution tool. It has become an unofficial standard for publishing Node modules (packages)
• . NPM is often used to install some dependent packages during the development process.

3. Use Vue CLI to

• install the Vue scaffolding

npm install -g @vue/cli

Note: The version installed above is the Vue CLI3 version. If you want to initialize the project according to the Vue CLI2 method, it is not possible

• to initialize the Vue CLI2 project

vue init webpack my -project