Hello,又见面了,我是渔戈!

上一次我们介绍了 webpack 是什么以及 webpack 的安装和默认打包方式(Vue的开发模式与webpack🔥),今天我们就接着来继续谈谈 webpack 的其他内容!

1.webpack 的默认打包

上一次我们提到了如果当前项目中没有存在 src/index.js 文件，那么 webpack 会报错,那么该怎么解决这个问题呢?

• 我们也可以通过配置来指定入口和出口:

2.webpack 的使用与配置

2.1 创建局部的 webpack

• 我们直接执行 webpack 命令使用的是全局的 webpack，如果希望使用局部的可以按照下面的步骤来操作。

• 第一步：创建 package.json 文件，用于管理项目的信息、库依赖等

• 第二步：安装局部的 webpack

• 第三步：使用局部的 webpack

• 第四步：在 package.json 中创建 scripts 脚本，执行脚本打包即可

2.2Webpack 配置文件

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

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

2.3 指定配置文件

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

• 比如我们将 webpack.config.js 修改成了 wk.config.js；

• 这个时候我们可以通过 --config 来指定对应的配置文件；

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

2.4Webpack 的依赖图

webpack 到底是如何对我们的项目进行打包的呢？

• 事实上 webpack 在处理应用程序时，它会根据命令或者配置文件找到入口文件；

• 从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js 文件、css 文件、图片、字体等）；

• 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的 loader 来解析）；

• 

##3.编写案例代码我们创建一个 component.js

通过 JavaScript 创建了一个元素，并且希望给它设置一些样式；

3.css-loader 的使用

上面的错误信息告诉我们需要一个 loader 来加载这个 css 文件，但是 loader 是什么呢?

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

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

• 在加载这个模块时，webpack 其实并不知道如何对其进行加载，我们必须制定对应的 loader 来完成这个功能

那么我们需要一个什么样的 loader 呢？

• 对于加载 css 文件来说，我们需要一个可以读取 css 文件的 loader；

• 这个 loader 最常用的是 css-loader；

css-loader 的安装：npm install css-loader -D

3.1css-loader 的使用方案

如何使用这个 loader 来加载 css 文件呢？有三种方式：

• 内联方式；

• CLI 方式（webpack5 中不再使用）；

• 配置方式；

内联方式：内联方式使用较少，因为不方便管理；

• 在引入的样式前加上使用的 loader，并且使用!分割；

CLI 方式:

• 在 webpack5 的文档中已经没有了--module-bind；

• 实际应用中也比较少使用，因为不方便管理；

3.2loader 配置方式

配置方式表示的意思是在我们的 webpack.config.js 文件中写明配置信息：

• module.rules 中允许我们配置多个 loader（因为我们也会继续使用其他的 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 } ] 的简写

3.3Loader 的配置代码

4 认识 style-loader

我们已经可以通过 css-loader 来加载 css 文件了

• 但是你会发现这个 css 在我们的代码中并没有生效（页面没有效果）

这是为什么呢？

• 因为 css-loader 只是负责将.css 文件进行解析，并不会将解析之后的 css 插入到页面中

• 如果我们希望再完成插入 style 的操作，那么我们还需要另外一个 loader，就是 style-loader；

安装 style-loader: npm install style-loader -D

4.1 配置 style-loader

那么我们应该如何使用 style-loader：

• 在配置文件中，添加 style-loader；

• 注意：因为 loader 的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将 style-loader 写到 css-loader 的前面；

重新执行编译 npm run build，可以发现打包后的 css 已经生效了：

• 当前目前我们的 css 是通过页内样式的方式添加进来的；

• 后续我们也会讲如何将 css 抽取到单独的文件中，并且进行压缩等操作；

相关文章:

你真的了解过Vue的组件化开发吗🔥

原来Vue3的computed属性还能这么用啊🔥

邂逅Vue3

Vue3的基本指令

Vue3:认识侦听器watch🔥

你真的了解v-model吗🔥