转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处： https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/
今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后，是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loader。首先，我们会学习如何使用那些可用的loader。它将包括如何处理css、scss、图片以及对老版本的JavaScript语言的转换。让我们开始吧！
在 之前的教程 ，我说Webpack是一个打包器。但这不是它仅有的目的。虽然Webpack天生只能理解JavaScript文件，但可以利用loader来改变这一点。除了能够处理多种类型的文件，Webpack还能修改它们。
使用loader最好的方式是在 webpack.config.js 文件中指定它们。要这么做，你需要添加 module.rules 属性。
css-loader 能够翻译引入的css文件。
npm install css-loader
考虑如下的配置
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: 'css-loader'
}
]
}
};rules 这个属性是一个数组，指明你的各个loader。它会作用于匹配到 test 属性所指定规则的每一个文件。这个规则，实际上，是一个正则表达式。
属性 use 指明需要对匹配的文件应用那个loader。
有了上面的代码，你就能够在你的JavaScript代码中导入css文件了。（例如，使用 之前我们提到的ES6模块 ）
但这还不能让css真正生效。我们需要一种方法让浏览器能够使用这些css。这种情况下， style-loader 就派上用场了。
npm install style-loader
但那就意味着要对css文件使用两个loader。你可以通过串联多个loader(chaining loaders)来使它们都生效。
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
}你可以看到，我们给了 use 属性一个数组。一个非常重要的注意点是，串联执行的顺序是反向的（译者注：也就是从右往左）。
/* style.css */
body {
background-color:black;
}
// index.js
import './style.css'使用上面的配置，打包的工作方式大概是:
Webpack尝试解析 style.css 文件
文件名与正则表达式 /\.css$/ 匹配
文件被 css-loader 编译
css-loader 处理后的结果会被传到 style-loader
最后， style-loader 返回一串JavaScript代码
默认情况下，打包后的输出是 ./dist/bundle.js 。现在，这个文件包含的代码会把所有的样式插入到 <style> 标签里面。如果你在HTML中引入了 bundle.js 的连接，在执行完脚本后，HTML会看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<style type="text/css">body {
background-color:black;
}</style></head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>有了这些知识，你可以轻松地给你的工程添加sass/scss支持了。你可以在这里使用 sass-loader 。
npm install sass-loader
只需要在你的loader链里插入它:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
}就是这样，现在你可以引入scss文件了！文件在被 css-loader 解析之前，会从scss转译成纯css。
（译者注: 如果安装完sass-loader后，本地运行Webpack出现了和node-sass相关的错误，可尝试再安装一个node-sass的包解决这个问题，即 npm install node-sass ）
实际上，loader可以接受一些选择项。让我们用 url-loader 为例来说明。
npm install url-loader file-loader
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader','sass-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5000
}
}
]
}
]
}
};注意，如果你想要给loader传入配置项，你不再是把loader以字符串形式给 use 属性。现在它是一个对象，包含两个属性: loader （即loader的名字），和 options 。
url-loader 会把你的图片转换为base64格式的URI。如果你的图片文件很小，那么把它们直接引入到代码中会有更好的性能。这可以减少浏览器所发的请求数。但是，如果你的图片文件很大，那么把它们作为单独的文件引入可能会更好，因为浏览器可以并行加载它们。
这就是为什么 url-loader 有一个 limit 属性。它指明了一个文件大小（以byte为单位），当超过这个大小时，文件将不会被转为base64的URI。相比较而言， file-loader 仅仅是被用来拷贝你的文件。
body {
background-image: url('./big-background.png');
}
.icon {
background-image: url('./icon.png');
}上面的配置会得到下面的结果：
<style type="text/css">body {
background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }
.icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh2DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>因为 big-background.png 比限制的大小更大，它被拷贝至 dist 文件夹，并被起了一个随机的名字。而相反， icon.png文件被转换为了base64 URI。
另一个流行的loader是 babel-loader 。它允许你使用 Babel 转译JavaScript文件。它解决了如何使用最新版本的JavaScript来编写代码的问题。如果你想支持老版本的浏览器，或者想使用现代浏览器还没有实现的功能，Babel都能够帮到你。
npm install babel-loader @babel/core @babel/preset-env
（译者注：原文的babel-core和babel-preset-env依赖被替换为@babel/core和@babel/preset-enve，因为新版本的Babel7中对官方提供的依赖使用了命名空间@babel）
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};注意到，我们这里使用了 exclude 属性，它也是一个 正则表达式 。如果任何文件与这个表达式相匹配，它将不会被转译。
这里有很多预置项可以满足你的需求。查阅 Babel的官方文档 ，你可以在那里找到它们的列表。
这一次我们学习了Webpack很有用的一个功能：loader。我们介绍了一些可用的loader。利用它们，我们在项目中添加上了对scss的支持。此外，我们还学习如何使用 url-loader 处理图片。另外一个loader的常用之处是我们讨论的利用Babel转译JavaScript。在教程未来的部分，我们会深入到loader中，包括写一个我们自己的loader。
关于葡萄城：
赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
