这是我参与「第五届青训营 」笔记创作活动的第 10 天
Webpack
我们可以通过webpack进行打包，之后运行打包之后的代码。
在目录下直接执行 webpack，生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件，这个文件中的代码被压缩和丑化了。
代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文
件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置。
webpack是如何确定我们的入口的呢？
事实上，当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口，所以，如果当前项目中没有存在src/index.js文件，那么会报错，也可以通过配置来指定入口和出口
npx webpack --entry ./src/main.js --output-path ./build
创建局部的webpack
前面我们直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。
第一步：创建package.json文件，用于管理项目的信息、库依赖等
npm init
第二步：安装局部的webpack
npm install webpack webpack-cli -D
第三步：使用局部的webpack
npx webpack
第四步：在package.json中创建scripts脚本，执行脚本打包即可
npm run build
Webpack配置文件
在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：
继续执行webpack命令，依然可以正常打包
npm run build
指定配置文件
如果我们的配置文件不是webpack.config.js的名字，而是其他的名字,比如将webpack.config.js修改成了 wk.config.js,这个时候可以通过 --config 来指定对应的配置文件
webpack --config wk.config.js
但是每次这样执行命令来对源码进行编译，会非常繁琐，所以可以在package.json中增加一个新的脚本：
之后再执行 npm run build来打包即可
Webpack的依赖图
webpack到底是如何对我们的项目进行打包的呢？
事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件，从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）。
然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；
css-loader的使用
上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？
loader 可以用于对模块的源代码进行转换；
我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；
在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；
那么我们需要一个什么样的loader呢？
对于加载css文件来说，我们需要一个可以读取css文件的loader；
这个loader最常用的是css-loader；
css-loader的安装：
npm install css-loader -D
css-loader的使用方案
如何使用这个loader来加载css文件呢？有三种方式：
内联方式；
CLI方式（webpack5中不再使用）；
配置方式；
内联方式：内联方式使用较少，因为不方便管理；
在引入的样式前加上使用的loader，并且使用!分割；
CLI方式
在webpack5的文档中已经没有了--module-bind；
实际应用中也比较少使用，因为不方便管理；
loader配置方式
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：
module.rules中允许我们配置多个loader，这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览。
module.rules的配置如下：
rules属性对应的值是一个数组：[Rule]
数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：
test属性： 用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
use属性： 对应的值是一个数组：[UseEntry]
UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
- loader：必须有一个 loader属性，对应的值是一个字符串
- options：可选的属性，值是一个字符串或者对象，值会被传入到loader中
- query：目前已经使用options来替代
传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式 （如：use: [ { loader: 'style-loader'} ]）；
loader属性： Rule.use: [ { loader } ] 的简写
