一、loader 的作用
-
loader 主要作用是用于对模块的"源代码"进行转换，就是在 import 或 require 加载模块时对他进行编译、压缩等处理，最终一起打包到指定的文件
-
webpack 本质上做的事情就是分析出各种模块之间的依赖关系，然后形成资源列表，最终打包生成到指定的文件中
在 webpack 内部中，任何文件都是模块，不仅仅只是 js 文件，默认情况下，在遇到 import 或者 require 加载模块的时候，webpack 只支持对 js 和 json 文件打包，像 css、sass、png 等这些类型的文件的时候，webpack 则无能为力，这时候就需要配置对应的 loader 进行文件内容的解析
当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件对应的loader 去进行解析
二、loader 的配置方式
最常用的就是在配置文件 webpack.config.js 指定 loader，通常写在module对象的 rules 属性中
-
rules是一个数组，可以让我们配置很多个 loader -
每一个 loader 对应一个对象的形式，对象属性
test为匹配的规则，一般情况为正则表达式，属性use针对匹配到文件类型，调用对应的 loader 进行处理
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
]
}
]
}
};
复制代码三、loader 的特性
- loader 是可以链式调用的，链中的每个 loader 会处理之前已处理过的资源，最终变成 js 代码，比如在解析sass文件的时候，就会先执行 sass-loader、css-loader、style-loader
四、常见的 loader
4-1 css-loader
作用：
- 负责将 .css 文件进行一个解析
- 分析 css 模块之间的关系，并合成⼀个 css
- 允许将 css 文件通过 require 的方式引入
rules: [
...,
{
test: /.css$/,
use: {
loader: "css-loader",
options: {
url: true, // 启用/禁用 url() 处理
import: true, // 启用/禁用 @import 处理
sourceMap: false // 启用/禁用 Sourcemap
}
}
}
]
复制代码拓展：如果只通过 css-loader 加载css文件，这时候页面代码设置的样式并没有生效，原因在于，css-loader 只是负责将 .css 文件进行一个解析，而并不会将解析后的 css 插入到页面中，如果要将解析后的 css 样式插入 html 文件 style 中，那么就需要 style-loader
4-2 style-loader
作用：把 css-loader 解析后的内容，用 style 标签挂载到页面的 head 中
rules: [
...,
{
test: /.css$/,
use: ["style-loader", "css-loader"] // 处理顺序为：从右到左，从下往上
}
]
复制代码4-3 less-loader
作用：将 less 预处理器编写的 css 样式解析成 css 文件
rules: [
...,
{
test: /.css$/,
use: ["style-loader", "css-loader","less-loader"]
}
]
复制代码4-4 raw-loader
作用：可以将文件作为字符串导入，主要用来解析txt、md格式的文件
module.exports = {
...,
module: {
rules: [
{
test: /.(txt|md)$/,
use: 'raw-loader'
}
]
}
}
复制代码4-5 file-loader
作用：主要将识别出的资源模块，移动到指定的输出⽬目录
rules: [
...,
{
test: /.(png|jpe?g|gif)$/,
use: {
loader: "file-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images",
// 打包后文件的 url
publicPath: './images',
}
}
}
]
复制代码4-6 url-loader
作用：
- url-loader 和 file-loader 类似，可以完成 file-loader 所有事情
- url-loader 可以设置一个limit值，当文件小于limit值的时候，就会把图片转成 base64 格式的字符串，并打包到 js中
rules: [
...,
{
test: /.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
// 小于 100 字节转成 base64 格式
limit: 100
}
}
}
]
复制代码
