webpack(模块打包工具)

webpack(模块打包工具)，是一个模块包，可以识别代码，翻译，压缩，整合打包，提高浏览器打开的速度。

webpack指令：
1：初始化，得到package.json文件
yarn init
2：添加依赖包
yarn add 所需功能包名（+@版本号）  -D
3：移除包
yarn remove 功能包名
4：安装项目全部依赖包
yarn
5：全局
安装：yarn global add 功能包名
卸载：yarn global remove 功能包名
注意：global 一定在add左边

webpack基本使用：
1：初始化文件夹包环境，得到package.json文件
yarn init
2：下载webpack等模块包
yarn add webpack webpack-cli -D
3：在package.json文件里设置自定义命令
"scripts": {  "build" :  "webpack"  }
4：创建src文件夹：默认index.js打包入口文件，执行package.json里build命令（parn build），执行webpack打包命令，默认输出是dist文件夹，main.js的打包结果
5：代码增加后：确保src/index.js的引入和使用，重新执行yarn build 打包命令
6：修改webpack入口和出口：需新建webpack.config.js（webpack默认的配置文件名），通过entry:  " ./src/main.js新入口文件名 " 设置入口文件路径。通过output：{ path: path.resolve( __dirname , ' dist出口文路径 '  ) , filename: ' bundle.js出口文件名 '  } 形式设置出口路径和文件名
7： 执行了webpack命令 yarn build 后：会自动找到配置文件，入口和依赖关系，打包代码输出到指定位置。
8：用yarn下的包，作用在前端项目：借助webpack，把模块和代码打包，把js文件引入到html执行查看效果
9：自动生成html文件：依赖html-webpack-plugin插件，yarn add html-webpack-plugin -D下载插件，在webpack.config.js配置写入即可const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ new HtmlWebpackPlugin({ template:'./public/index.html' }) ]
10：打包css文件：直接引入会报错，因为webpack默认只能识别js类型的文件。依赖css-loader和style-loader，css代码被打包进js文件中，style-loader会把css代码插入到head下style标签内。
11：打包less文件：依赖less-loader和less模块包，转换css后还需要css-loader和style-loader的处理。
12：打包图片：webpack5, 在rules里, 针对图片文件设置type: asset  。小于8KB转base64字符串进js里, 大于8KB输出文件。
13：图片转base64打包进js中好处和坏处：好处是减少浏览器发送的请求次数, 读取图片速度快。坏处是图片过大, 转base64占空间会多30%左右。
14：处理图标字体文件：在webpack.configjs的rules里针对字体图标文件类型，设置asset/resource, 直接输出到dist下
15：降低js版本语法：借助babel-loader和babel编译器, 给webpack配置上
16：使用webpack开发服务器：打包在内存中, 速度快。自动更新打包变化的代码, 实时返回给浏览器显示。
17：使用webpack开发服务器实时打包代码：确保下载了webpack-dev-server到工程中，在package.json-配置自定义命令, 然后启动即可。webpack-dev-server会给我们一个地址+端口浏览器 访问即可看到在内存中打包的index.html页面
18：修改webpack开发服务器的配置：去文档查找配置项的名字，在webpack.config.js – devServer选项里添加。

总结：
1：webpack 有什么作用？
打包整合压缩转译你的代码
2：webpack本质上？
第三方的包，需要下载到当前工程里
3：webpack基础使用：
--1：初始化文件夹包环境，得到package.json文件
yarn init
--2：下载webpack等模块包
yarn add webpack webpack-cli -D
--3：在package.json文件里设置自定义命令
"scripts": {  "build" :  "webpack"  }
--4：编码 - 所有的代码都要和“入口”有直接或间接引入关系才会被webpack一起打包
4：webpack默认的入口和出口
入口：src/index.js
出口：dist/main.js
5：webpack相关的配置
webpack.config.js
entry  --  入口
output  --  出口
6：编写代码是开发环境 - 运行的都是打包后的代码
7：webpack-插件：更多功能
html-webpack-plugin（自动生成html文件-自动引入打包后的一切）
webpack-dev-server（浏览器自动打包和更新）
package.json文件内
    "scripts": {
    "build": "webpack",               //  yarn build 执行打包命令
    "serve": "webpack serve"      //  yarn serve 执行自动更新命令
     }
webpack.config.js文件内
     devServer: {
    port: 2270,                             //  自定义端口号
    open:true                              //自动打开浏览器 open:true
     }
8：webpack-加载器：处理更多类型的文件
style-loader：处理css文件
css-loader：解析css文件
less-loader：把css插入到DOM上去
type: “assets“：处理图片文件
type: “assets/resource“：处理字体图标文件
babel-loader：高版本js语法降级处理