WebPack

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序

我们来对上面的解释进行拆解：

打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具

静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；

模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；

现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发 展；

1.JavaScript的打包：

将ES6转换成ES5的语法；
TypeScript的处理，将其转换成JavaScript；

2. Css的处理：
   CSS文件模块的加载、提取；
   Less、Sass等预处理器的处理；

3.资源文件img、font：  图片img文件的加载；
 字体font文件的加载；

4.HTML资源的处理：
打包HTML资源文件；
处理vue项目的SFC文件.vue文件；

Webpack的安装

webpack的安装目前分为两个：webpack、webpack-cli

npm install webpack webpack-cli –g # 全局安装

npm install webpack webpack-cli –D # 局部安装

Webpack的默认打包

我们可以通过webpack进行打包，之后运行打包之后的代码

在目录下直接执行 webpack 命令

生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件：

 这个文件中的代码被压缩和丑化了；
 另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文 件是否需要转成
ES5之前的语法，后续我们需要通过babel来进行转换和设置；

通过配置来指定入口和出口
Webpack的默认打包

webpack
npx webpack --entry ./src/main.js --output-path ./build

Webpack配置文件

◼在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。

◼ 我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：
Webpack配置文件

指定配置文件

我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？

 比如我们将webpack.config.js修改成了 wk.config.js；  这个时候我们可以通过 --config 来指定对应的配置文件

但是每次这样执行命令来对源码进行编译，会非常繁琐，所以我们可以在package.json中增加一个新的脚本：

css-loader的使用

loader 可以用于对模块的源代码进行转换；

我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；

加载css文件三种方式

内联方式；
 CLI方式（webpack5中不再使用）；
 配置方式；

style-loader

处理less文件

使用less、sass、stylus的预处理器来编写css样式，效率会更高

配置webpack.config.js

file-loader

要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader

file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文 件夹中；

设置文件的名称

设置文件的存放路径

可以通过outputPath来设置输出的文件夹

url-loader

◼ url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的UR

why url-loader的limit

但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可

这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；

而大的图片也进行转换，反而会影响页面的请求速度；

url-loader有一个options属性limit，可以用于设置转换的限制

加载字体文件

使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文件的处理也是一样 的

从阿里图标库中下载了几个字体图标

在component中引入，并且添加一个i元素用于显示字体图标：

字体的打包

这个时候打包会报错，因为无法正确的处理eot、ttf、woff等文件：

我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理；

Plugin

Loader是用于特定的模块类型进行转换；
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

** CleanWebpackPlugin**

每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：

我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin；

安装这个插件：
npm install clean-webpack-plugin -D

HtmlWebpackPlugin

◼ 另外还有一个不太规范的地方：
 我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。
 在进行项目部署的时，必然也是需要有对应的入口文件index.html；  所以我们也需要对index.html进行打包处理；

对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin；

npm install html-webpack-plugin -D

DefinePlugin的使用

◼ DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

CopyWebpackPlugin

在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。

这个复制的功能，我们可以使用CopyWebpackPlugin来完成；

安装CopyWebpackPlugin插件：
npm install copy-webpack-plugin -D

Mode配置