Learn more about the module packaging tool webpack

What is webpack? This article will introduce you to the module packaging tool webpack. I hope it will be helpful to you!

1. What is webpack

1. Official explanation

Essentially speaking, Webpack is a static modular packaging tool for current JavaScript applications. (This sentence is summarized from two points, namely module and packaging)

##Let’s talk about

module## The concept of #andpackaging!

2. Front-end modularization

Some solutions for front-end modularization: AMD, CMD, CommonJS, ES6 (browser

cannot recognize
• them, but webpack can be their underlying support before modular development can be carried out)
ES6
• Previously, if we wanted to carry out modular development, we had to use other tools so that we could carry out modular development and after completing the project through modular development, we still needed to process
Various dependencies between modules
• , and integrate and package them
webpack
• appears at this time, one of the cores is to make it possible Carry out modular development, and will help us deal with dependencies between modules. Instead of just
JavaScript
• files, our CSS, images, json files, etc. are in webpack All can be used as modules.

3. How to understand packaging?

webpack can help us

modularize
• and handle various complex relationships between modules Finally, the concept of packaging is easy to understand. is to package and merge various resource modules in webpack into multiple packages (Bundle)
• and during the packaging process, you can also Resource processing
, such as compressing images, converting scss to css, converting ES6 syntax to ES5 syntax, converting TypeScript to JavaScript, etc.
• Packaging tools and 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 task (such as ES6, ts conversion, image compression , convert scss to css) 2. Then let grunt/gulp execute these tasks in sequence, and automate the entire
  process

  Let’s look at 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. Only simple merging and compression are needed, just use grunt/gulp

  3. If the entire project uses Modular management and very strong interdependence, we can use webpack.
  
  
  

  What is the difference between grunt/gulp and webpack?
1.
• grunt/gulp puts more emphasis on the automation of the front-end process, and modularization is not its core

  
  2.webpack puts more emphasis on modularizationdevelopment management, and file Compression, merging, preprocessing and other functions are its included functions
  

2. Installation of webpack

（wepack

In order to operate normally, it must rely on the

node environment, and in order for the node environment to execute normally, it must use the npm tool to manage various dependent packages in node)So to install webpack, you must first install Node.js. Node.js comes with the package management tool npm

Install webpack globally (npm install webpack@3.6.0 -g)
• Partial installation webpck (npm install webpack@3.6.0 --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 parsing

• dist folder: is used to store the files that will be packaged later
• src folder: is 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 in other places.
  index.html: The browser opens the displayed homepage html (the content of the final packaged file in src, that is, the dist folder is quoted here).
  package.json: File generated through npm init and managed by npm package.

The following is the code in the mathUtils.js file and the main.js file: (CommonJS modular specification, CommonJS is a modular standard, nodejs It 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)

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

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

(map the packaging command to packaging Entry and exit)

Code in this file:

##entry: is the packaged entry

output: For the packaged export

we need to obtain the path in the output dynamically,
• so we can use Node.js syntax to import A module. This module is path (const path = require('path'). The file within the quotation marks needs to be found in the node package)
• Used through the
• npm init command (initialization)node.js
Then 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

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

Run

After npm install webpack@3.6.0 --save-dev, add the following dependencies

4. Map the webpack command to npm run

In addition to mapping

webpack to entry and exit, you can also map webpack The command is mapped to npm run Some operations (need to be modified in the **"script"** script tag in package.json). .

4. How to use 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 dependencies related to js before.
• However, in development, it is not only processed by the basic js code, but also needs to be loaded. css, pictures, including some advanced ones such as converting ES6 to ES5 code, converting TypeScript to ES5 code, converting scss and less to css, converting .jsx and .vue files into js files, etc.
• Regarding the capabilities of webpack itself, these transformations are not supported.
• At this time, just extend the
• webpack extension corresponding to the loader.

2. Loader usage process

1), css file processing

Preparation work:

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

2. Reorganize the directory structure of the file and place scattered js files in The code in

3 and normal.css in a js folder is very simple, that is, setting the body to red

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

5. At this time we must reference

main.js that is entry file and then we need to import Corresponding loader

is used!

• 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 usage method of style loader:
  
  

• Step 2: Configure under the modules keyword in webpack.config.js

Instructions: Among them 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- loaderHelp us handle

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

2), less file processing

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

• Step 2: Modify the corresponding configuration file (in webpack.config .js) for processing .less files. As follows:

3), image file processing

• Step 1: Add two pictures to the project (one is less than 8kb, the other is larger than 8kb)

• Step 2: First consider adding css Reference images in the style, is as follows

  

• ##Step 3: Modify the corresponding configuration file (in webpack .config.js) for processing image files. As follows:

  

• Step 4: An error was found after packaging, because images larger than 8kb will pass file-loader Processing, 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
  1. This is a 32-bit hash value, the purpose is to prevent name duplication

  2. However, in actual development, there may be certain requirements for packaged image names
  

• So, we can add the following options in options:
  1. img: the folder where the file is to be packaged

  2. name: get the original name of the picture and put it in This position
  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
  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 is 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 to vue in index.html For example, as follows

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

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

6. How to use Vue in webpack

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

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

Step 3: Create the APP.vue file and change the # of the vue page ##Template and js code, css code are separated, as follows

Step 4: Configure the corresponding loader of vue ,

Modify the configuration file of webpack.config.js:

7. Use of plugin

1. Get to know the plugin

What is the 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. The extension of webpack itself is an
  extender
plugin usage process
• 1. Step 1: Installing through npm requires the use of plugins (some webpack already built-in plugins do not need to Installation)
  2. Step 2: Configure the plug-in in plugins in webpack.config.js
  

2. Webpack-Add copyright information Plugin usage

3. Plugin for packaging html

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 to achieve what we want for the browser Automatically refresh to display the modified results .

But it is a separate module, you need to install it before using it in webpck
• Command: (npm install --save-dev webpack-dev-server@2.9.1 )

  
  

devserver is also an
• option

  in webpack. The option itself can be set with the following properties: 1. contentBase: which folder provides local services, the default is the root folder, we need to fill in ./dist 2. port: port number
  3. inline: page refresh in real time
  4. historyApiFallback: In the SPA page, rely on the history mode of HTML5
  
  

The webpack.config.js file configuration is modified as follows:

• 
  

–open parameter means opening the browser directly

In addition,
below we want to separate the webpack configuration file: that is,

The things you need to use during development

are separated from the things you need to publish(compile). as follows:

9. Vue CLI

#1. What does CLI mean?

• 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 can quickly build the Vue development environment and the corresponding webpack configuration

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

However, using Node must involve npm,

What is NPM?

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

3. Use of Vue CLI

• Install Vue scaffolding

npm install -g @vue/cli

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

• Vue CLI2 initialization project

vue init webpack my-project

For more node-related knowledge, please visit: nodejs tutorial!

The above is the detailed content of Learn more about the module packaging tool webpack. For more information, please follow other related articles on the PHP Chinese website!