Basics & build & build webpack.config.js & webpack build commands webpack learning process (a) webpack first project

First, the basics

webpack is based on the node to build, node syntax can also be used.

First, create a file for the project webpack-study project
and then create a src file
created dist dist folder to store files released product-level source code.

asl

使用npm 初始化项目
打开当前项目目录下的终端
输入命令 npm init -y

Then you need to install the packages that are currently here I need Jquery

	在终端输入命令安装Jquery : npm i jquery -S

The current project directory becomes this:

because the current import $ from 'jquery' ES6 this syntax is not recognized browser, it will complain.
It is necessary to build tools using webpack the front end. The contents of the output to blundle.js main.js go.

查看当前webpack版本命令: webpack -v

将当前的main.js输出到bundle.js中去(webpack打包命令):

4.0以后命令是 需要这样 : --output-filename和--output-path

3.0：webpack ./src/main.js ./dist/boundle.js

4.0：webpack --mode production src/main.js --output-filename bundle.js --out-path dist

This time it will be packed to the main.js bundle.js directory dist go.

Sample code:

The above example illustrates webpack can solve any problem?

1.webpack能够处理js文件的相互依赖关系，我们只需要在一个文件中引入一个main.js就可以使用了。
2.webpack能够处理高级的JS语法，把高级的浏览器不识别的语法转换成低级的浏览器能够识别的语法。

---

Second, the use webpack.config.js build

In the project, do not want to write so much is to be built with webpack.config.js command file.

In the new home directory: webpack.config.js

webpack.config.js Code:

//使用配置文件后 构建命令就是 webpack了 手动写出来

const path = require('path')

// 这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象。
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口表示要使用webpack打包那个文件

    output:{
        path: path.join(__dirname,'./dist'),//出口 指定打包好的文件输出到那个目录中去
        filename: 'bundle.js' //这是指定输出文件的名称
    }

    
}

Command in the terminal using the WebPACK packaging commands: webpack

But here there was a yellow warning: the current version is 4.35, that is not configured webpack mode production environment or development environment

Solution:
In the configuration inside webpack.config.js development environment or a production environment
code is as follows:

//使用配置文件后 构建命令就是 webpack了 手动写出来

const path = require('path')

// 这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象。
module.exports = {
    // 配置webpack 生产环境 development  和开发环境 production
    mode: 'development',
    entry: path.join(__dirname,'./src/main.js'),//入口表示要使用webpack打包那个文件

    output:{
        path: path.join(__dirname,'./dist'),//出口 指定打包好的文件输出到那个目录中去
        filename: 'bundle.js' //这是指定输出文件的名称
    }

    
}

Note:
demand development environment:
module hot update
sourceMap
interface agent
code standards checking

Demand production environment
to extract common code
compression confuse
file compression / base64 encoded
removing unused code

Both in common:
the same inlet
same code process (process Loader)
same resolution configuration

---

Three, webpack build command process

When we enter webpack command is available in the console webpack do the following steps:
1. When we enter webpack command directly in the console, first of all we did not find webpack
assigned to it by way of command entry and export
the root 2.webpack will go to projects to find a configuration file named webpack.config.js
3. when find the configuration file, webpack will to resolve the implementation of this configuration file, when parsed the execution profile, you get the configuration file
in the exported configuration file.
4. When the configuration file webpack get this object, inlet and outlet to get the specified configuration object is then packaged constructs.