本节我们来学习 webpack
中 loader
加载器的使用,那么什么是 loader
呢。从本质上来说,loader
就是一个 Node.js 模块,在 webpack
的定义中,loader
导出一个函数,loader 会在转换源模块的时候调用该函数。
webpack
本身依然是只能处理 JS 文件的,但是通过一系列的 loader
,就可以处理其他文件啦。例如 Less
和 Sass
,以前我们编译这些 CSS 预处理器,需要使用 gulp
进行编译,而显示可以通过 webpack
中的 loader
加载器来实现。
常见loader
webpack
中有一系列的 loader
,在实际项目中,我们会根据不同的需求使用到不同的 loader
。例如 webpack
中的一些常见 loader
如下所示:
css-loader
: 用于处理css
文件,使得能在js
文件中引入使用。style-loader
: 用于将css
文件注入到index.html
中的<style>
标签上。less-loader
:处理less
代码。sass-loader
: 处理sass
代码。postcss-loader
:用postcss
来处理 CSS代码。babel-loader
:用babel
来转换 ES6 文件到 ES5。file-loader
:打包图片,打包字体图标。url-loader
:和file-loader
类似,但是当文件小于设定的limit
时,可以返回一个DataUrl
(提升网页性能)。html-withimg-loader
:打包 HTML 文件中的图片。eslint-loader
:用于检查常见的 JavaScript 代码错误,也可以进行"代码规范"检查。
loader的安装和配置
我们可以在 webpack.config.js
配置文件中配置 loader
,可以在 module.rules
中指定一个或多个 loader
。
通过配置loader
的两个属性来实现:
test
属性:用来标识出应该被对应的loader
进行转换的某个或多个文件。use
属性:表示转换时要用哪个loader
。
示例:
例如默认情况下 webpack
只能打包 JS 文件,不能识别其他例如 CSS、Less、image等类型的文件,那么如果我们想要打包 CSS 样式文件,可以在 webpack
中使用 loader
加载器,可以将一种文件转换为另一种文件,将webpack
不能识别的其它类型文件转换为 webpack
可识别 JS 类型文件。
首先需要安装 style-loader
和 css-loader
,安装命令如下所示:
npm install css-loader style-loader --save-dev
命令执行成功后,这两个 loader
会自动添加到 package.json
的依赖中,如下所示:
"devDependencies": {
"css-loader": "^3.6.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-dev-server": "^3.11.0"
}
然后在 webpack.config.js
中配置 loader
,在 module
属性的 rule
属性中配置 loader
规则:
module:{
rules:[{
test:/.css$/,
use:['style-loader','css-loader']
}]
}
这里表示匹配所有 .css
后缀结尾的文件,通过 style-loader
和 css-loader
加载器进行转换后再编译。
然后我们创建一个 xkd.css
文件,内容如下所示:
p{
font-size: 12px;
color: red;
}
并将 xkd.css
文件导入到 index.js
入口文件中:
document.write('你好,侠课岛!');
// 导入 CSS 文件
import "./xkd.css";
然后我们执行打包命令后会重新生成打包文件,会发现 xkd.css
文件也成功打包到 bundle.js
文件中。
这就是 loader
的基本使用流程,先安装loader
,然后在配置文件中配置 loader
,最后再进行打包就可以啦。
loader 特性
-
loader
支持链式调用,链中的每个loader
会将转换应用在已处理过的资源上。一组链式的loader
将按照相反的顺序执行。链中的第一个loader
将其结果传递给下一个loader
,依此类推。 -
loader
可以是同步的,也可以是异步的。 -
loader
运行在 Node.js 中,并且能够执行任何操作。 -
loader
也可以内联显示指定。 -
loader
可以通过options
对象配置。 -
除了常见的通过
package.json
的main
来将一个npm
模块导出为loader
,还可以在module.rules
中使用loader
字段直接引用一个模块。 -
插件(plugin)可以为
loader
带来更多特性。 -
loader
能够产生额外的任意文件。