Introduction and installation of webpack, simple to use

1. What is webpack

Webpack is a popular front-end resource modular management and packaging tool. It can package many loose modules according to dependencies and rules into front-end resources that meet the deployment of the production environment. It is also possible to separate the modules loaded on demand and load them asynchronously when they are actually needed. By loaderconversion of any kind of resources can be regarded as a module , such as CommonJs modules, AMD module, ES6 module, CSS, images, JSON, Coffeescript, LESS and so on.
Insert picture description here

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 allow us to carry out modular development and help us deal with the dependencies between modules . And not just JavaScript files, our CSS, images, json files, etc. can all be used as modules in webpack.
Packaging is to package and merge various resource modules in webpack into one or more bundles, and in the process of packaging, you can also process resources, such as compressing pictures, converting scss into css, and converting ES6 syntax Convert to ES5 syntax, convert TypeScript to JavaScript and so on.

2. Webpack installation

You must first install Node.js , Node.js comes with its own package manager npm, and webpack requires Node.js v0.6 or higher support.

2.1 Global installation

npm install webpack -g

At this point Webpack has been installed to the global environment, enter the command line, webpack -vyou can view the installed version of webpack.

Use the above command to install the latest version of webpack. If we want to install a specific version of webpack, such as version 3.6.0, we can execute the following command:npm install [email protected] -g

2.2 Partial installation

Because a project often depends on a specific webpack version, the global version may be inconsistent with the webpack version of this project, and packaging is prone to problems . So usually a project has its own partial webpack. We will install webpack into the project's dependencies so that the local version of webpack can be used.

# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
 npm install webpack --save-dev

--save-dev Refers to dependencies during development, which do not need to be used when the project is finally run
After we execute this installation command, there will be one more devDependencies in the package.json file

3. Basic use of webpack

Some descriptions of the directory structure:

src : source folder
dist : the packaged folder

3.1 Simple to use, code demonstration

Insert picture description here
info.js file

// info.js 文件使用 ES6 的模块语法
let name = 'webchang';
let age = 20;
export {
    
    name,age}

mathUtils.js file

//mathUtils 文件使用 CommonJS 的模块语法
function add(num1, num2) {
    
    
  return num1 + num2;
}

function mul(num1, num2) {
    
    
  return num1 * num2;
}

module.exports = {
    
    
  add,
  mul
}

main.js file

//1.使用 commonJS 模块化规范
let {
    
    add,mul} = require('./mathUtils')

//2.使用ES6的模块化规范
import {
    
    name,age} from './info';

console.log(add(10,20));
console.log(mul(10,20));

console.log(name,age);

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 introduced into the html file, 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 modular 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.

Next, enter through a terminal the project directory, execute webpack ./src/main.js ./dist/bundle.jscommand (WebPACK inlet file output)

Package the main.js file in the first src folder to generate a new file bundle.js file and place it in the dist folder
If the main.js file depends on other files, webpack will automatically handle this dependency
After the packaging is successful, there will be one more bundle.js file in the dist folder

We create an index.html file for testing, in which the bundle.js file in the dist folder is imported through the script tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>

</body>
<script src="./dist/bundle.js"></script>
</html>

The browser prints correctly:
Insert picture description here

Demonstration code download address: https://webchang.lanzous.com/iNnlKkf9g4j Password: 8bey

3.2 Configure the packaged entry and exit parameters

Let’s consider that in the above code, if you need to write the entry and exit as parameters every time you use the webpack command, it is very troublesome. Is there a way to write these two parameters into the configuration? At runtime, How about direct reading?

of course can!

First we create a project in the root directory of webpack.config.jsthe file

Then make some configuration in the file

Tip: If you need to use something node in the project related to the use npm initor npm init -ythe project initialization, create a file package.json

let path = require('path');            //使用node的path模块

// 入口:可以是字符串/数组/对象，这里我们入口只有一个,所以写一个字符串即可
// 出口:通常是一个对象，里面至少包含两个重要属性，path和filename
module.exports = {
    
    
  entry: './src/main.js',              //入口
  output: {
    
                                //出口
    path: path.join(__dirname,'dist'), //path通常是一个绝对路径，注意 dirname前边是两个下划线
    filename: 'bundle.js'              //打包后的目标文件
  }
}

Once you've configured webpack.config.js file, we can directly use the webpackcommand to package, do not need to add entrance and exit path, this time webpack will automatically go to webpack.config.jsthe file to find the entrance and exit packaged .
Insert picture description here
Note: The commands used in the terminal are global, which means that the webpack command we typed above uses the webpack installed globally

3.3 continue configuration

In the process of real projects, webpack commands are rarely used directly, but instead npm run build, how to make such a mapping relationship between commands? We need to package.jsondocument scriptsthe configuration.

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/xxx path.
If it is not found, it will look for it in the global environment variables.

are some of the command scripts defined when we use npm run xxxtime, will go to package.json file scripts to find xxx command to execute.
So we add a new one in scripts "build": "webpack", when we execute npm run build, it is equivalent to executing webpack command.
The use of npm run xxxtime, it will give priority to seek xxx command to execute projects locally, if not local, will go global to find. For example, if we don't install webpack locally (only used in the project), only webpack is installed globally. Then when you execute npm run build, it will execute the globally installed webpack. Why is it so troublesome? Because there are versions. The locally installed webpack version used in the project may be different from the global webpack version !

Why is it so troublesome to configure so much? Of course, this is also reflected not come out, when we use vue-clithe time to develop, the command to be executed may be very long, then configure the look better.