# webpack

**Repository Path**: zhangshuaifun/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: 学习笔记
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### git clone <远程库地址> 从远程库中拉取一个仓库到本地

#### git push 把本地库的当前状态推送到远程库

#### git pull 从远程库中更新最新状态到本地库

# webpack

#### 模块化可以更好的解决复杂应用开发过程中代码的组织问题

#### 作用：
*	1.能够将散落的模块打包到一起，能够编译代码中的新特性，能够支持不同种类的前端资源模块；
*	2.对于环境兼容问题的代码：webpack可以在打包过程中通过Loader机制对其实现编译转换，然后再进行打包。
*	3.对于不同类型的前端模块，webpack支持在JavaScript中以模块化的方式载入任意类型的资源文件，例如可以通过webpack实现在JavaScript中加载CSS文件，被加载的CSS文件将会通过style标签的方式工作。
*	4.具备代码拆分的能力，能够将应用中所有的模块按需分块打包，不用担心全部代码打包到一起，产生单个文件过大，导致加载缓慢的问题。

### 一、webpack与模块化开发
*	模块化：当下最重要的前端开发范式之一，一种最主流的项目组织方式，提高开发效率，降低维护成本。
*	解决的问题：如何在前端开发项目中，更高效的管理和维护项目中的每一个资源。

### 二、文件划分方式：将每一个功能，以及相关的数据状态，单独存放到不同的js文件中，约定每一个文件就是一个单独的模块，使用模块需要将模块引入到页面当中，一个<script>标签对应一个模块。

#### 1.缺点：
*	模块直接在全局工作，大量模块成员污染全局作用域
*	没有私有空间，所有模块内的成员都可以在模块外部被访问到，或者被修改
*	一旦模块增多，容易产生命名冲突
*	无法管理模块与模块之间的依赖关系
*	在维护过程中也很难分辨每个成员所属的模块

#### 2.命名空间方式：
*	约定每一个模块只允许暴露一个全局对象，所有模块的成员都挂载到这个全局对象中。
*	做法：将每一个模块包裹为一个全局对象，相当于给每一个模块增加l一个命名空间。可以解决命名冲突的问题，但其它问你依然存在。

#### 3.在2基础上添加一个立即执行函数，为每一个模块提供一个私有的空间
*	做法：将每一个模块的成员都放在一个立即执行函数所形成的一个私有作用域当中，对于需要暴露给外部的成员需要挂载到全局对象上的方式实现。
*	立即执行函数的方式具有私有成员函数的概念，私有成员只可以在模块内部通过闭包的方式去访问，解决作用域污染，命名冲突的问题。

#### 4.依赖参数
	通过参数明显的表明这个模块的依赖的模块
	（模块加载问题未解决)

#### 理想的方式：在页面中引入一个js入口文件，其余用到的模块可以通过代码控制，按需加载。

#### 模块化的规范使用
*	1.一个统一的模块化的标准规范
*	2.一个可以自动加载模块的基础库

#### CommonJS规范（同步）
*	是node.js中所遵循的模块规范，该规范约定一个文件就是一个模块，每个模块都有单独的作用域，通过module.exports导出成员，再通过require函数载入模块。   
*	在node加载模块的机制中：启动式加载模块，使用模块。在浏览器端使用同步加载的模式，会一起大量同步模式的请求，导致整体应用的运行效率底下。

#### 浏览器端：
*	早期制定前端模块化标准时没有直接选择CommonJS规范，为浏览器端重设了一个规范AMD(Asynchronous Module Definition),即 异步模块定义规范。	同期推出：Require.js，除了实现AMD模块化规范，本身是一个强大的模块加载器。

#### AMD规范定义一个模块
```js
	define(['jQuery','./module2.js'],function($,module2){
		return {			//暴露方式
			start:function(){
				$('body').animate({margin:'200px'})
				module2()
			}
		}
	})
````

####  define与require区别：define可以用来加载模块，也可以用来定义模块，require只可以加载模块。

#### AMD规范载入一个模块,可以自动加载模块。内部会自动创建一个<script>标签进行请求执行对应的模块代码。
```js
	require(['./modules/module1.js'],function(module1){
	    module1.start()
	})
```




# webpack two

#### ps: “%~dp0” 表示当前路径，也就是 .bin 目录，"…\ "表示上级项目，也就是 node_modules 目录，./是当前目录	（Uncaught SyntaxError）：语法错误

#### webpack ：		
*	1.是一个现代JavaScript应用程序的静态模块打包器（modulebundler）。当webpack处理应用程序时，它会递归的构建一个依赖关系图（dependency  graph）,其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
*	2.通俗讲是一个打包构建工具，将各种各样的资源整合打包到一起，形成一个最终的完整的项目。解决一些高级js语法浏览器无法兼容的问题。

#### 安装: webpack
*	1.首先创建空白文件夹mywebpack，在命令行进入项目文件，通过(npm init -y)创建项目，初始化出项目的package.json（会自动记录安装使用的插件）文件。
*	2.安装：（npm install webpack webpack-cli -D）

*	3.先创建npm init -y，再安装npm install webpack webpack-cli --save-dev，此工具用于在命令行中运行 webpack。
	
*	第二种，先全局安装webpack
*	命令：npm install -g webpack
*	然后再在项目内安装
*	命令：npm install webpack --save-dev
*	这样在项目内就可以直接使用webpack命令了，运行的却是局部的webpack


### 案例：
* 1.假设要去开发一个网站，创建一个index.html文件，并且创建index.js文件作为网页的js文件。
* 2.在此项目的基础上，创建一个工具js文件(tool.js)
* 3.在首页的index.js文件中去做一个求和的操作，需要导入tool.js文件提供的sum求和方法。

* 等同于：let tool ={sum}  import tool from "./tool.js"

#### 出现的问题：
* import或者export这种es6模块化的语法，浏览器是不支持的
* 解决方案：使用webpack将高级的js语法打包成浏览器能够执行的低级的js语法代码

#### 如何使用webpack解决问题
* 1.安装webpack (npm install webpack webpack-cli -D)
* 2.设置webpack的配置文件，并且配置模式(创建：webpack.config.js文件)
* 3.设置webpack打包的入口和出口文件
* 4.将webpack运行，得到需要的文件(在命令行中输入webpack即可)

#### webpack.config.js文件详情代码如下：
```js
//路径处理模块，引入path
const path = require('path')
//在webpack的配置文件中使用的是commonJS规范去暴露一个配置对象就可以了
module.exports = {     //是node中一种暴露对象的语法
    mode:"development", //开发模式
    //mode:"production"   //发布模式

    //entry属性设置webpack需要打包转换的js入口文件，原文件
    entry:path.join(__dirname,'./src/js/index.js'),

    //output设置打包转换之后的文件路径以及文件的名称
    output:{
        //路径    放到dist规定的文件夹中
        path:path.join(__dirname,"./dist"),
        //文件名称,最终生成的文件名
        filename:"bundle.js"
    }
}
```
#### 扩展
* 情景：现在webpack打包是将代码打包成一个js文件，首页就只需要引入这个js文件就可以得到想要的也页面效果
* SPA(single page application,单页面应用程序)
* MPA(multiple page application,多页面应用程序)

#### 问题：如果是多个页面，每个页面都需要运行各自对应的js文件，打包转换的时候就应该产生多个js文件
* 解决方案：webpack可以设置多个入口文件，也可以设置多个出口文件
* webpack.config.js文件详情代码如下：
```js
const path = require('path')
module.exports = {
    mode:"development",
    entry:{     //可以设置多个接口文件  当前目录下的src文件夹
        "index":path.join(__dirname,'./src/js/index.js'),
        "contact":path.join(__dirname,'./src/js/contact.js')
    },
    output:{
        path:path.join(__dirname,"./dist"),
        //文件名称可以设置为"[name].js"自动匹配entry中的index，contact名
        filename:'[name].js'
    }
}
```

### ps:
*   --save（默认）简写为：-S
*   生产环境：自动把模块和版本号添加到 dependencies。

*   --save-dev    简写为：-D
*   开发环境：自动把模块和版本号添加到 devdependencies。


### 2.项目工程自动化
* 问题：每次打包项目都需要重新运行webpack命令，浏览器也需要重新打开
* 解决：可以使用 webpack-dev-server 来自动打包和运行项目(npm install webpack -dev-server -D)
* 可以使用 html-webpack-plugin 来自动打开浏览页面(npm install html-webpack-plugin -D)

#### 项目工程自动化的步骤
* 1.安装对应的插件
* npm install webpack -dev-server -D
* npm install -webpack-plugin -D    (出问题后使用：npm install webpack-dev-server -g 全局安装)(npm install webpack-dev-server --save-dev 局部安装)
* 2.修改package.json文件，创建一个指令来方便我们执行webpack-dev-server(设置自动打开本机，并且设置本机端口)
* 3.修改webpack.config.js文件，添加插件并使用
* 4.运行webpack-dev-serve(npm run dev)

#### --open自动打开  --port打开的端口号     --contentBase打开的目录     --hot启动热加载
```js
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888 --contentBase src --hot"
  }
```

#### 使用加载器
*   1.前端的骨肉魂，html骨，肉css, 魂js
*   2.如果想要在项目中通过webpack打包css样式，需要安装加载器
*   3.webpack只能识别js文件，其它文件不可以识别，css文件也不可以识别，想要让webpack识别js之外的文件，就需要安装相对应的加载器
* 问题：webpack不能打包渲染css
* 解决方案：使用加载器让webpack能够识别并渲染css
* 1.安装加载器  (npm install style-loader css-loader -D)两个加载器(style-loader,css-loader)
* 2.打开webpack.config.js 文件，配置加载器

#### index.js中第一种使用import可以导入css文件
*   import '../css/index.css'
```js
    //首先导入html-webpack-plugin插件
    const htmlplugin = require("html-webpack-plugin")

    //使用htmlplugin函数创建插件实例对象
    const myhtmlplugin = new htmlplugin({
        //设置html-webpack-plugin(可以直接打开网页)插件 需要去预览哪一个网页，设置成需要预览的网页

        template:"./src/index.html",

        //filename 用来设置预览，./src/index.html(对所要浏览的网页进行编译，并且存放在本地服务器上面使用) 对应网页的名称
        filename:"index.html"

    })
    //在webpack的配置文件中使用的是commonJS规范去暴露一个配置对象就可以了
    module.exports = {     //是node中一种暴露对象的语法
        mode:"development", //开发模式
        //mode:"production"   //发布模式

        //入口entry属性设置webpack需要打包转换的js入口文件，原文件
        entry:path.join(__dirname,'./src/js/index.js'),

        //出口output设置打包转换之后的文件路径以及文件的名称
        output:{
            //路径    放到dist规定的文件夹中
            path:path.join(__dirname,"./dist"),
            //文件名称,最终生成的文件名
            filename:"bundle.js"
        },

        //plugin数组是用来设置webpack需要使用的所有插件的数组，将实例化对象名称挂载到plugins里面
        plugins:[
            myhtmlplugin
        ],

        //第一种(推荐使用)使用module.rules可以用来配置加载器
        module:{
            //rules数组用来存放多个加载器对应的设置
            rules:[

                //test属性用来设置一个正则表达式，使用正则可以匹配项目中的文件
                //use属性用来设置使用哪个加载器来处理test属性对应的文件
                //注意：loader加载器的加载顺序是从后向前
                {test:/\.css$/,use:['style-loader','css-loader']}
            ]
        }
    }
```

#### 第二种使用加载器解析css文件的方式     
* modules(模块)开启模块化的一个方式   style-loader!css-loader加载器去解析../css/index.css
* import style from 'style-loader!css-loader?modules!../css/index.css'
* ps:去掉webpack.config.js中的module.rules配置


#### 自定义加载器
* css-loader,style-loader
* webpack中的加载器是一个commonJS风格的函数，它可以接收文件的源代码，然后将代码进行替换，进行处理之后输出成一个结果文件
```js
module.exports = function(source){
    return:结果
}
```

#### 案例：模拟现有的一个功能插件，使用自定义加载器注释console语句。 项目分为开发模式和发布模式，在开发模式中，我们会使用console语句去打印信息协助开发调试，当项目进入发布模式的时候，就需要将项目发布到网站上供别人使用，此时不需要console打印信息。
* 1创建一个加载器文件(js文件)
* 2.配置自定义的加载器


#### 自定义插件
* ps:加载器和插件有没有区别，loader加载器可以认为是一个更low一点的东西。    如果想要更加丰富的功能，更加强大的功能，使用插件可以提供这些功能。
* 插件也可以认为是一个函数
* 编写一个插件，将打包文件的文件名称形成一个文件目录并保存在json文件中
* 1.先创建一个plugin文件夹，然后在文件夹里面创建一个myplugin.js文件

```js
   //1.创建一个函数
function myplugin(){
    
}
//2.给函数的原型添加一个apply函数
myplugin.prototype.apply = function(compiler){
    //当导入插件的时候就会解析和执行apply函数

    //compiler是一个对象，包含webpack的所有配置信息，在启动时被初始化，包括entry,output,loaders等配置，这个对象在启动webpack时被实例化，而且是全局唯一的，Plugin可以通过该对象获取webpack的配置洗信息进行处理

    //compilation Compilation(compilationParams)对象可以理解编译对象，包含了模块，依赖，文件等信息，每修改一次文件都会产生一个新的Compilation对象，Plugin可以访问到本次编译过程中的模块，依赖，文件内容等信息


    //注意：plugin老方法注册钩子在新版webpack中已经被替换为hooks
    // compiler.plugin('compiler',function(compilationParams){
    //     console.log('webpack编译器开始执行了')
    // })
    // compiler.plugin('emit',function(compilationParams){
    //     console.log('在输出结果文件到dist文件夹之前执行')
    // })
    // compiler.plugin('done',function(compilationParams){
    //     console.log('所有的事情都做完了')
    // })


    //给myplugin插件添加了emit事件钩子，    (事件钩子异步的情况下使用)tapAsync,如果是同步的话使用tapsync
    compiler.hooks.emit.tapAsync('myplugin',(compilation,callback)=>{
        //如果是异步的钩子，必须要调用callback回调函数
        console.log("在输出结果文件到dist文件夹之前执行")


        //创建一个对象，用来保存json文件中展示的内容
        const mainfast = {}

        //遍历compilation里面的资源属性assets文件信息
        for( const name of Object.keys(compilation.assets)){

            //在mainfast对象里面创建一个属性，文件的值(compilation.assets[name].size())就是该文件资源的大小
            //在mainfast对象里面属性名就是文件名称，属性的值就是文件的大小
            mainfast[name] = compilation.assets[name].size()
        }

        //将mainfast以json文件的形式输出出来，在生成的资源assets文件中添加一个文件(mainfast.json)
        compilation.assets['mainfast.json'] = {
            source(){
                //设置源代码，将mainfast对象转换成一个json格式字符串，然后将字符串放入到mainfast.json文件中去
                return JSON.stringify(mainfast)
            },
            size(){
                //设置source()方法的长度
                return this.source().length
            }
        }


        callback()
    })
}

//将函数暴露出去
module.exports = myplugin

//3.在webpack.config.js中导入
    //导入自定义插件       需要实例化new
    const myplugin =require('./plugin/myplugin.js')
    const newmyplugin = new myplugin()

    //plugin数组是用来设置webpack需要使用的所有插件的数组，将实例化对象名称挂载到plugins里面
    plugins:[
        myhtmlplugin,newmyplugin
    ],
```



# webpack three

#### 理解前端模块化

#### 理解webpack打包的核心思路

#### 理解Webpack中的“关键人物”

* 1.命名冲突，脚本变量冲突，给同级变量设置不同的命名空间。
* 模块化的优点：作用域封装，重用性，解除耦合

#### 命令操作：
* 1.node -v：查看node.js下载版本，npm -v:查看node.js(npm版本)
* 2.mkdir demo：创建文件夹
* 3.cd demo：进入文件夹
* 4.npm init：初始化文件夹(一直按enter选择默认值即可)
* 5.code .：在命令行打开文件夹
* 6.npm cache clear:清楚本地缓存
* 7.npm init -y(默认全部配置，相当于以上4步的操作结果)
* 8.webpack里面的工具进行全局安装后在别的项目里可以直接调用，不用重复安装。局部安装的话只仅限于在本项目中调用。
```js
    module.exports = {
    resolve:{      //配置不写文件的后缀名
        extensions:['.wasm','.mjs','.js','jsx','json']
    }
    entry:path.resolve(__dirname,'src/index.js')    //配置入口文件
```

#### package.json介绍：
```js
    {
    "name": "demo", //包名称，类似于包id
    "version": "1.0.0", //版本号
    "description": "",
    "main": "index.js",//包执行的入口
    "scripts": {    //npm提供的脚本命令功能，自定义脚本
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }
```
#### npm仓库：是一个遵循npm特定包规范的一个站点，提供一些pI供用户的上传下载，获取包信息，管理用户账号。
#### 不建议使用低于5的npm版本开发
* 1.低版本的npm在安装的时候不会自动帮助我们记录包的版本信息文件，会给构建过程带来隐患 
* 2.npm5,更好的缓存机制，可以有效的提高安装速度，高版本的npm更好的交互，报错信息清晰，方便排错)

#### 使用淘宝提供的仓库(镜像仓库)，把npm上的包映射到国内的镜像上，在下载使用的时候就相当于像国内的站点发送请求。

* 淘宝的镜像链接：npm config set registry http://registry.npm.taobao.org

* 2.安装包：npm install loadash (参数-s 或者 --save)首先检查npm版本，5以下版本需要使用(-s 或者 --save)，5以上版本直接默认不写  (下载成功后写入package.json文件中的"dependencies": {
    "loadash": "^1.0.0"
  }里面，迁移项目的时候只需要将package.json文件搬走，在新的项目环境里面运行npm install,然后读取dependencies里面的包以及对应的版本号，把依赖的包重新装回来)

* 2.1： npm install jquery -save-dev  (指定当前环境为开发环境),npm会把包安装在(devDependencies)里面

* PS:   dependencies:生产环境下的依赖(实现功能的包)，devDependencies：开发环境下的依赖，(本地开发时用的包，构建工具，质量检测工具)
```js
    //npm install loadash   生产环境下的依赖
     "dependencies": {  
    "loadash": "^1.0.0"
  },
  //npm install jquery -save-dev  开发环境下的依赖
  "devDependencies": {
    "jquery": "^3.5.0"
  }
```


#### 环境区分：
* 1.npm install --only=prod (生产环境，包只会安装到dependencies里面)
* 2.npm install --only=dev (开发环境，只会安装到devDependcies里面)

#### 语义化版本：
* 1.^version:中版本和小版本
*   ^1.0.1 ->1.x.x

* 2. ~version: 小版本
*   ~1.0.1 -> 1.0x
* 以上两者为动态版本，(获取范围内最新的版本)在更新迭代后不需要使用者操作，宰使用install重新安装后会自动更新版本
* version: 特定版本(保证构建的可靠性，需要将模块的版本号固定下来，直接写固定)

#### scripts:npm提供的一个脚本命令功能(分为两种)
* 第一种：npm自己的生命周期命令，指的是在一个npm包的安装和发布过程中允许开发者写的*钩子*(例：preinstall,postinstall,prepublish,postpublish)
```js
    "scripts": {    //可以自定义命令行
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server",
    "build":"eslint ./src && webpack"
    }
    "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --mode production",    //唤起打包的逻辑
    "start": "webpack-dev-server --mode development --open" //唤起webpack-dev-server实现预览
    }
```

#### 安装包出现问题后：
* 1.使用：rm(remove) -rf node-modules && npm install   (先把本地的包删除，然后重新装)不严谨
* 2.删除后重装还是同样的问题的话可能版本信息文件中的包本身就有问题

#### npm install(全局安装)的过程     包的优先级最高
* 1.寻找包版本信息文件 (package.json),依照它来进行安装
* 2.查package.json中的依赖，并检查项目中其它版本信息文件(如果此时项目中不存在版本信息文件，就完全按照package.json安装，并且生成一个版本信息文件，如果此时存在版本信息文件，则只会安装package.json中有，版本信息文件没有的那些包)
* 3.如果发现了新包，就更新版本信息文件

#### webpack核心特性：
* 1.使用webpack构建简单的工程
* 2.了解webpack配置文件
* 3.掌握"一切皆模块与loaders"的思想
* 4.理解webpack中的"关键人物"

* 在命令行运行webpack命令时报错，可能是没有安装webpack-cli的一个全局命令(npm install webpack-cli -g),需要进行全局安装
* 在命令行运行webpack命令，webpack会预支一个入口文件，从index.js文件入手，去遍历本文件中所使用到的模块，把需要用到的模块全都加载进来，包括本身的代码逻辑也加载进去，进行编译之后放在main.js里面
* webpack在运行的时候如果发现webpack.config.js文件的话就会走该文件里面的配置文件
```js
    const path = require('path')//处理文件路径的时候需要用到的模块

    module.exports = {
        entry:"./src/app.js",   //工程资源的入口，根据依赖依次进行模块打包      入口app.js文件位置的指定索引,文件路径必须准确  
        output:{    //出口，每一个入口都会对应一个打包的结果，对打包最终的产物进行配置
            path:path.join(__dirname,"dist"),   //必须是绝对路径， 文件输出的路径
            filename:'bundle.js'    //编译后输出的文件名 出口为bundle.js
        }
    }

```

#### webpack-dev-server:启动本地服务，带来开发便利,打包不会生成实际的文件，不会占用dist下实际的存储空间，只是暂存于缓存中(webpack-dev-server <指定路径--config> <自动启动浏览器 --open>)
* 1.可以监听工程文件目录的改动，在修改源文件再次保存的时候，可以动态的实时的实现重新打包
* 2.并且自动刷新浏览器(出问题后使用：npm install webpack-dev-server -g 全局安装)
* 3.也可以在命令行输入文件地址进行运行：./node-modules/.bin/webpack-dev-server)

#### 核心特性：一切皆模块，webpack本身只可以处理js语法，不识别别的类型语法，如果引入其它类型的语法的话，就需要给webpack添加特别类型的对应的loader才可以，对于css文件来说，就需要引入一个对应的css loader

* 1.可以在js文件中引入css文件，(还可以引入less,scss,png) webpack会处理依赖数据中的所有资源
import './style.css'
* 2.loader:对webpack能力的拓展，loader是文件加载器，实现的是文件的转译，编译功能；loader的配置:每一个版本的约定都不相同
* 3.处理css文件需要给webpack引入一个对应的css  loader(npm install css-loader --save-dev) 下载完毕后需要配置webpack.config.js
* 4.将css文件的样式生成一个style标签插入到页面中去(npm install style-loader --save-dev)

#### 注意加载顺序：由后向前加载
```js
    //loader的配置顺序和加载顺序是相反的，加载顺序从后向前加载。(例:当style标签已经放到页面里面了，css还未加载完就会造成出错)
    'style-loader',  //将样式生成一个style标签插入到页面中去
    'css-loader',  //使用css-loader只解决了一个css解析的问题，不能把样式的实际的加载到页面上
```

#### plugins:增加项目中webpack的功能，强调事件监听的能力，在webpack内部监听事件，并且改变一些文件打包后的输出结果,压缩文件，减小代码的体积
* 1.安装plugins:(1.npm install uglifyjs-webapack-plugin --save-dev)(2.npm install uglifyjs-webpack-plugin -D)
* 2.引入plugins插件(const myplugins = require('uglifyjs-webpack-plugin'))
* PS:报错找不到文件(Cannot find module 'webpack/lib/RequestShortener')的时候运行：(npm link webpack --save-dev  npm链接webpack——save-dev)
```js
    //将myplugins实例化挂载到plugins
    plugins:[
        new myplugins()
    ]
```

#### webpack构建工程
* 1.使用webpack构建真实的react工程
* 2.掌握babel的用法，理解babel原理
* 3.掌握高频loader和plugin的用法
* 4.掌握生产级别的webpack配置方法
* 5. cacheDirectory:true,  cacheDirectory默认值为false,是否对编译的结果进行缓存，节省性能的开销(每次编译都是耗费性能的)

* 1.1创建项目(npm init -y)
* 1.2添加项目依赖(npm install react react-dom可以同时多装依赖)
* 1.3安装webpack:((不可取，容易出错)npm install webpack webpack-cli -D 此种安装方法在命令行运行相对路径：./node_modules/.bin/webpack)
* 1.4安装webpack:npm install webpack webpack-cli -g(全局安装)，任何地方都可以运行webpack命令
* 1.5安装babel规则:(npm install babel-loader),安装需要使用的规则(npm install @babel/preset-env @babel/preset-react两套规则)
* 1.6安装plugin处理html文件：(开发环境：npm install html-webpack-plugin -d)(生产环境：npm install html-webpack-plugin)





#### babel:核心包和cli包搭配使用，需要将高版本的代码编译成低版本的代码时使用

#### 在项目中安装loader(npm install babel-loader),安装需要使用的规则(npm install @babel/preset-env @babel/preset-react两套规则)
* 1.babel安装：npm install @babel/core @babel/cli -g(全局安装，任何地方都可以调用) (@babel/core 编译中所要使用到的一些核心逻辑)
* 2.安装转换规则：npm install @babel/preset-env(preset-env包，可以把高版本的ES代码转换成低版本的)
* 3.(可执行文件)babel (参数)test.js (命令行配置参数)--presets=@babel/preset-env(babel test.js --presets=@babel/preset-env  对js文件直接编译,将下载好的配置规则需要放进去)
* 4.报错：
```js
(Error: Cannot find module '@babel/core')时，原因：babel-core的版本不对
babel-loader 8 对应的 babel-core版本为：7
解决办法：卸载babel-core重新安装
卸载：npm un babel-core
重新安装：cnpm i -D @babel/core
```
* 5.babel支持配置文件：(两种形式)(presets:预设)
```js
    1."babel":{
    "presets":["@babel/preset-env"] //指定规则
  }

  2.新建文件(.babelrc)
  配置：
    {
    "presets":["@babel/preset-env"]
    }
```
* 打包错误信息：(从报错信息我们可以知道是 webpac 没有找到入口，webpack 默认的入口是“./src/index.js”,创建相应的目录和文件即可，创建 src 文件夹并在文件夹里面创建 index.js 文件（空文件即可），当然我们也可以通过传入 entry 覆盖默认值，不让 webpack 去找默认位置的文件作为入口。)
* PS:react组件标签名首字母必须是大写

#### 热更新：
* 1.可以直接在配置命令行里面添加(--hot)
* 2.需要进行配置：
```js
    const webpack = require("webpack")
    plugins:[
        new htmlplugin({
            template:path.resolve(__dirname,'src/index.html'),
            filename:'index.html'
        }),
        new webpack.HotModuleReplacementPlugin()//热更新，(HotModuleReplacementPlugin)webpack中的一个属性,需要引入webpack
    ],
    //HMR：热更新，再不刷新页面的情况下可以更新页面中的内容
    devServer:{
        hot:true
    }

    //入口文件
    //可以配置不写文件后缀
    import App from './App'

    if(module.hot){
        module.hot.accept(error=>{
            if(error){
            console.log("热更新出bug了")
            }
        })
    }
```

#### webpack性能调优：对构建出来的结果进行优化
* 1.打包结果：空间维度，体积小，传输速度快，用户体验效果好
* 2.构建过程优化：时间维度，开发过程时间短，缓存
* Tree-Shaking:重要优化思想