css-loader
import '../css/index.css';
function component() {
const element = document.createElement('div');
element.innerHTML = ['Hello', 'Webpack'].join('');
element.className = 'content';
return element;
}
document.body.appendChild(component());
上面的代码引入了css样式，使用webpack打包时，报错： 
报错提示我们需要一个loader来加载css文件，那么loader是什么呢？
- loader可以用于对模块的源代码进行转换
- 我们可以将css文件也看成是一个模块，我们通过import来加载这个模块
- 在加载模块时，webpack其实并不知道如何对其进行加载，我们需要选择对应的loader来完成这个功能
那我们需要一个什么样的loader呢？
- 加载css文件，我们需要一个可以读取css文件的loader
- 一般使用css-loader
css-loader的使用方案
如何使用这个loader来加载css文件呢？有三种方式：
内联方式
在 import css 文件的时候，在最前面加上 css-loader! 就可以使用 css-loader 了，如果需要使用多个 loader ，可以在前面继续使用 xxx-loader! ```jsx import ‘css-loader!../css/index.css’; function component() { const element = document.createElement(‘div’);element.innerHTML = [‘Hello’, ‘Webpack’].join(‘’); element.className = ‘content’;
return element; }
document.body.appendChild(component());
- CLI方式（webpack5中不再使用）
- 在webpack5的文档中已经没有了
- 实际开发中基本不使用
- 配置方式
<a name="0ead1aa6"></a>
## loader配置方式
配置方式表示的意思是在我们的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：目前已经使用optiions来替代
<a name="ooQwl"></a>
# style-loader
我们已经可以通过css-loader来加载css文件了
- 但是这个css代码在页面中并没有生效
这是为什么呢？
- 因为css-loader只是负责将.css文件进行解析，并不会将解析后的的css插入到页面中
- 如果我们希望再次完成插入style的操作，那么我们还需要另外一个loader，就是style-loader
<a name="5696a24d"></a>
## 配置style-loader
那么我们如何使用style-loader？
- 在配置文件中，添加style-loader
- 注意：因为loader的执行顺序是从右往左，所以我们需要将style-loader写道css-loader的前面
<a name="3ecc8163"></a>
## 如何处理less文件？
在开发中，我们会使用less、sass、stylus的预处理器来编写css样式，效率更高
1. 安装less-loader
npm i less-loader
2. webpack进行如下配置
<a name="rF4NS"></a>
## 如何处理浏览器兼容性问题？
开发过程中，浏览器的兼容性问题，我们应该如何去解决和处理？
- 这里的兼容性是指针对不同的浏览器支持的特性：比如css特性、js特性之间的兼容性
我们知道市面上有大量的浏览器：
- Chrome、Safari、IE、Edge
- 他们的市场占有率是多少？要不要兼容他们？
这里就要用到一个工具 browserslist
<a name="o7KDw"></a>
# browserslist工具
这个工具用于配置项目的css和js的兼容性
- 当我们设置要给条件： > 1%
- 就是css和js要兼容市场占有率1%的浏览器
browserslist是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置
<a name="gIoH7"></a>
## browserslist编写规则一：
在开发中，我们可以编写的条件有哪些呢？
- default：Browserslist的默认浏览器(>0.5%，last 2 versions，Firefox ESR，not dead)
- 5%：通过全局使用情况统计信息选择的浏览器版本。
- 5% in US：在美国的使用情况统计信息。
- > 5% in alt-AS：在亚洲地区的使用情况统计信息。
- dead：在24个月内没有官方支持或更新的浏览器。
- last 2 versions：每个浏览器的最后两个版本。
- last 2 Chrome versions：最近两个版本的Chrome浏览器。
<a name="JuRL5"></a>
## browserslist编写规则二：
- node 10 和 node 10.4：选择最新的Node.js10.x.x 或 10.4.x 版本
- current node： Browserslist现在使用的Node.js版本
- IOS7：直接使用IOS浏览器版本7
- Firefox > 20 ：Firefox的版本高于 20 ≥,<和 ≤ 也可以使用
- ie 6-8：选择一个包含范围的版本
- extends browserslist-config-mycompany：从browserslist-config-mycompany包中查询
- supports es6-module：支持特定功能的浏览器。
- since 2015 或 last 2 years：自2015年发布的所有版本
- not ie ≤8 ：排除先前查询选择的浏览器
<a name="PPSg9"></a>
## 在哪里编写browserslist？
可以在package.json中编写： <br /><br /> 也可以在src下建立一个browserslistrc的文件，在其内部编写 <br />
<a name="l8vN5"></a>
# 认识PostCss工具
什么是postcss？
- postcss是一个通过js来转换样式的工具
- 这个工具可以帮助我们进行一些css的转换和适配，比如自动添加浏览器前缀、css样式的重置
- 但是实现这些工具，我们需要借助于postcss对应的插件
如何使用postcss？主要是两个步骤
1. 查找postcss在构建工具中的扩展，比如webpack中的postcss-loader
1. 选择可以添加一需要的postcss相关的插件
<a name="zmP35"></a>
## 配置使用postcss
可以通过 npm i postcss-loader 引入postcssloader，在webpack.config.js中配置使用，达到添加浏览器前缀的效果 <br />
<a name="qpAbz"></a>
## 使用postcss-preset-env
1. 安装
npm i postcss-preset-env
2. 配置
<a name="oz3WN"></a>
# file-loader
要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader
- file-loader的作用就是帮助我们处理import/require()方式引入的文件资源，并且会将它放到我们输出的文件夹中
- 我们可以修改它输出的名字和文件夹
<a name="b301b3cc"></a>
## file-loader基本用法
用法非常简单，通过正则匹配到图片格式文件，使用file-loader即可
```jsx
{
test: /\.(jpe?g|png|gif|svg)/,
use: 'file-loader',
},
文件名称规则
我们可以将处理后的文件按照一定规则进行命名：
- 比如保留原本的文件名、扩展名，同时为了防止重复，包含一个hash值等
这时我们可以通过使用PlaceHolders来完成，由webpack提供
介绍一些最常用的placeholder
- ext：处理文件的扩展名
- name：处理文件的名称
- hash，文件的内容，使用MD4的散列函数处理，生成一个128位的hash值（32个16进制）
- contentHash：在file-loader中和hash结果一致（在webpack的其他地方不一样）
- hash:<>length：截取hash的长度，默认32位太长
- path：文件相对于webpack配置文件的路径
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash:6].[ext]'
},
},
],
文件输出路径
文件输出路径也可以修改
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash:6].[ext]',
outputPath: 'img',
},
},
],
这样即可在打包出的bundle文件夹下新建img文件夹，将file-loader处理的文件放入下面，文件中使用到的路径也会被自动修改过来
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[hash:6].[ext]',
},
},
],
url-loader
url-laoder和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。
- 安装
npm i url-loader -D
- 配置
{
test: /\.(jpe?g|png|gif|svg)/,
use: [
{
loader: 'url-loader',
options: {
name: 'img/[name].[hash:6].[ext]',
},
},
],
},
url-loader的limit
我们开发中，小图片转换成base64和js一起请求，如果大图也转换为base64反而会影响请求速度，所以我们通过limit限制图片转换的规则
options: {
name: 'img/[name].[hash:6].[ext]',
limit: 100 * 1024,
},
在options中添加limit即可，值为1kb，所以如果限制100kb大小的图片，就填写100*1024即可
asset module type的介绍
我们当前使用的是webpack5
- 在webpack5之前，加载这些资源我们需要一些loader，比如raw-loader、url-loader、file-loader
- 在webpack开始，我们可以直接使用资源模块类型（asset module type ）来替代上面这些loader
资源模块类型（asset module type）通过添加4种新的模块类型，来替换所有这些loader
- asset/resource 发送一个单独的文件并导出URL。之前通过使用file-loader实现
- asset/inline 导出一个资源的data URI，之前通过使用url-loader实现
- asset/source 到处资源的源代码，之前通过是使用raw-loader实现
- asset 在导出一个data URI和发送一个单独的文件之间自动选择，之前通过使用url-loader并且配置资源提及限制实现。
asset module type的使用
基本使用
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/resource', // file-loader的效果
},
自定义文件的输出路径和文件名
- 方式一：修改output，添加assetModuleFilename属性
- 方式二：在Rule种，添加一个generator属性，并且设置filename
加载字体文件
如果我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文件的处理也是一样的。
首先从阿里图标库下载图标字体
在项目中使用 
在webpack中配置 
若有收获，就点个赞吧
0 人点赞
