文章目录
  1. 1. Loader
    1. 1.1. Loader的存在
    2. 1.2. Loader的特性
    3. 1.3. 使用Loader
  2. 2. 静态资源Loader
    1. 2.1. CSS相关Loader
    2. 2.2. 文件相关Loader
  3. 3. 结束语

最近项目中需要搭建一个多页面的环境,包括本地路由服务和分页面打包。
本节介绍比较经常使用到的静态资源相关loader们,像css-loader、url-loader等。

Loader


参考《Loader》

Loader的存在

Webpack本身只能处理JavaScript模块,如果要处理其他类型的文件,就需要使用loader进行转换。

Loader可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。
这样,我们就可以通过require来加载任何类型的模块或文件,比如CoffeeScript、 JSX、 LESS或图片。

Loader的特性

  • Loader可以通过管道方式链式调用,每个loader可以把资源转换成任意格式并传递给下一个loader,但是最后一个loader必须返回JavaScript
  • Loader可以同步或异步执行。
  • Loader运行在node.js环境中,所以可以做任何可能的事情。
  • Loader可以接受参数,以此来传递配置项给loader
  • Loader可以通过文件扩展名(或正则表达式)绑定给不同类型的文件。
  • Loader可以通过npm发布和安装。
  • 除了通过package.jsonmain指定,通常的模块也可以导出一个loader来使用。
  • Loader可以访问配置。
  • 插件可以让loader拥有更多特性。
  • Loader可以分发出附加的任意文件。

Loader本身也是运行在node.js环境中的JavaScript模块,它通常会返回一个函数。
大多数情况下,我们通过npm来管理loader,但是你也可以在项目中自己写loader模块。

使用Loader

在你的应用程序中,有三种使用loader的方式:

  1. 配置(推荐):在webpack.config.js文件中指定loader
  2. 内联:在每个import语句中显式指定loader
  3. CLI:在shell命令中指定它们。

静态资源Loader


我们来看看静态资源相关的Loader们。

CSS相关Loader

加载CSS需要css-loaderstyle-loader
他们做两件不同的事情,css-loader会遍历CSS文件,然后找到url()表达式然后处理他们,style-loader会把原来的CSS代码插入页面中的一个style标签中。

  1. css-loader

我们看webpack上解释:
css-loader 解释(interpret)@importurl(),会import/require()后再解析(resolve)它们。

说白了是用来处理css文件中的url()或者@import的路径。

  1. style-loader

通过注入<style>标签将CSS添加到DOM中。

1
2
3
4
5
6
7
8
9
10
11
12
// 通过webpack配置使用
// css-loader和style-loader推荐一起使用,注意顺序
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
  1. less-loader

一看就知道,less-loader主要用于将LESS转换成CSS的。
css-loaderstyle-loaderless-loader链式调用,添加对webpack的LESS支持,可以把所有样式立即应用于DOM。

LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数。

如果需要启用CSS的source map,需要配置选项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "less-loader", options: {
sourceMap: true
}
}]
}]
}
};
  1. postcss-loader
    postcss-loader提供了一种方式用JavaScript代码来处理CSS。负责把CSS代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。
    插件基于CSS代码的AST所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的CSS规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。

postcss-loader的使用依赖一些插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 配置webpack.config.js
module: {
loaders: [
{
test: /\.css$/,
// loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [
// 里面是我们要用的插件
];
}

以下插件都需要单独安装相关npm模块:

  • autoprefixer
    • 解析CSS文件并且添加浏览器前缀到CSS规则里,对浏览器兼容补全还是挺方便的
  • stylelint
    • Stylelint插件可以让你在编译的时候就知道自己CSS文件里的错误
  • postcss-cssnext
    • 可以让你写CSS4的语言,并能配合autoprefixer进行浏览器兼容的不全,而且还支持嵌套语法
  • postcss-import
    • @import css文件的时候让webpack监听并编译

更多的可以参考《PostCSS配置指北》

文件相关Loader

  1. file-loader

file-loader主要用来处理图片。

  1. url-loader

url-loader的功能类似file-loader加载器,但是在文件大小低于指定的限制时(单位 bytes)可以返回一个Data Url

大小限制可以通过传递查询参数来指定。(默认为无限制)
如果文件大小大于限制,将转为使用file-loader,所有的查询参数也会透传过去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// => 如果 "file.png" 大小小于 10kb 将返回 DataUrl
require("url-loader?limit=10000!./file.png");
// webpack配置
module: {
loaders: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}

结束语


本节我们大致了解静态资源相关loader们,当时具体使用的时候还是得历练一番的。
代码的话,大家可以看看github-vue-multi-pages,主要是这套环境使用在vue上的demo。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. Loader
    1. 1.1. Loader的存在
    2. 1.2. Loader的特性
    3. 1.3. 使用Loader
  2. 2. 静态资源Loader
    1. 2.1. CSS相关Loader
    2. 2.2. 文件相关Loader
  3. 3. 结束语