Webpack

定义

静态模块：指的是编写代码过程中的html，css，js，图片等固定内容的文件

打包：把静态模块内容压缩、整合、翻译等（前端工程化）

1）把less/sass转成css代码

2）把ES6+降级成ES5+

3）支持多种模块标准语法

使用Webpack

步骤：

1.新建并初始化项目，编写业务源代码

utils/check.js写导出代码

index.js引入代码

2.下载webpack webpack-cli到当前项目中（版本独立）

npm i webpack webpack-cli --save-dev

--save-dev标记这两个包是在开发环境下使用

3.在package.json中配置局部自定义命令

4.运行打包命令，自动产生dist分发文件夹（压缩和优化后，用于最终运行的代码）

npm run build

 dist文件夹就是打包后的文件

修改打包入口和出口

Webpack配置：影响Webpack打包过程和结果

官网：概念 | webpack 中文文档

修改入口

修改出口

导出只能有一次

步骤：

1.项目根目录新建webpack.config.js配置文件

2.导出配置对象，配置入口，出口文件的路径

3.重新打包观察

注意：只有和入口产生直接/间接的引入关系，才会被打包

优化:二次打包不会清空上次打包的内容

解决：（5.20.0以上版本可使用）

自动生成html文件

使用html-webpack-plugin插件，在Webpack打包时生成html文件

文档：HtmlWebpackPlugin | webpack 中文文档

 步骤：

1.下载html-webpack-plugin本地软件包

npm i html-webpack-plugin --save-dev

2.配置webpack.config.js让Webpack拥有插件功能

输出文件的路径最好是在出口设置的文件夹（dist）下

3.重新打包观察效果

打包css代码

加载器css-loader：解析css代码

文档：css-loader | webpack 中文文档

加载器style-loader：把解析后的css代码插入到DOM

文档：style-loader | webpack 中文文档

步骤：

1.准备css文件代码引入到src/login/index.js中（压缩转译处理等）

import 'css文件路径'

2.下载css-loader和style-loader本地软件包

npm i css-loader style-loader --save-dev

3.配置webpack.config.js让Webpack拥有该加载器功能

4.打包后观察结果（打包后的css代码在index.js中）

注意：Webpack默认只识别js代码

优化-提取css代码

使用mini-css-extract-plugin插件提取css代码

文档：MiniCssExtractPlugin | webpack 中文文档

注意：不能和style-loader一起使用

步骤：

1.下载mini-css-extract-plugin本地软件包

npm i mini-css-extract-plugin --save-dev

2.配置webpack.config.js让Webpack拥有该插件功能

3.打包后观察效果

好处：css文件可以被浏览器缓存，减少js文件体积

优化-压缩过程

问题：css代码提取后没有压缩

解决：使用css-minimizer-webpack-plugin插件

文档：MiniCssExtractPlugin | webpack 中文文档

CssMinimizerWebpackPlugin | webpack 中文文档

 步骤：

1.下载css-minimizer-webpack-plugin本地软件包

npm i css-minimizer-webpack-plugin --save-dev

2.配置webpack.config.js让webpack拥有该功能

3.打包重新观察

打包less代码

加载器less-loader：把less代码编译为css代码

文档：less-loader | webpack 中文文档

 步骤：

1.新建less代码并引入到src/login/index.js中

import 'css文件路径'

2.下载less和less-loader本地软件包

npm i less less-loader --save-dev

3. 配置webpack.config.js让webpack拥有该功能

注意：less-loader需要配合less软件包使用

加载器可以识别更多内容类型的代码，插件一般是提供更多的功能

打包图片

资源模块：Webpack5内置资源模块（字体，图片等）打包，无需额外loader

文档：资源模块 | webpack 中文文档

步骤：

1.配置webpack.config.js让Webpack拥有打包图片功能

1）占位符【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

2）占位符【ext】使用当前模块原本的占位符，例如：.png/.jpg等字符串

3）占位符【query】保留引入文件时代码中查询参数（只有URL下生效）

2.打包后观察效果和区别

注意：判断临界值默认为8KB

1）大于8KB文件：发送一个单独的文件并导出URL地址

2）小于8KB文件：导出一个data URL（base64字符串）

js中引入本地图片资源要用import方式（如果是网络图片http地址，字符串可以直接写）