摘要：它将包括如何处理图片以及对老版本的语言的转换。添加使用最好的方式是在文件中指定它们。而相反，文件被转换为了。它允许你使用转译文件。此外，我们还学习如何使用处理图片。在教程未来的部分，我们会深入到中，包括写一个我们自己的。
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后，是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loader。首先，我们会学习如何使用那些可用的loader。它将包括如何处理css、scss、图片以及对老版本的JavaScript语言的转换。让我们开始吧！
Webpack 4 入门教程继续 - 什么是loaders？在之前的教程，我说Webpack是一个打包器。但这不是它仅有的目的。虽然Webpack天生只能理解JavaScript文件，但可以利用loader来改变这一点。除了能够处理多种类型的文件，Webpack还能修改它们。
添加loader使用loader最好的方式是在webpack.config.js文件中指定它们。要这么做，你需要添加module.rules属性。
css-loader
css-loader能够翻译引入的css文件。
npm install css-loader
考虑如下的配置
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: "css-loader"
}
]
}
};
rules
rules 这个属性是一个数组，指明你的各个loader。它会作用于匹配到 test 属性所指定规则的每一个文件。这个规则，实际上，是一个正则表达式。
use
属性 use 指明需要对匹配的文件应用那个loader。
串联多个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。现在，这个文件包含的代码会把所有的样式插入到