webpack只能理解JavaScript和JSON文件。loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
注意，loader能够import导入任何类型的模块（例如 .css 文件），loader还可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为data URL。
使用loader的最佳方法是在webpack.config.js文件中指定它们。为此，需要添加module.rules属性。module.rules属性允许你在webpack配置中指定多个loader。
css-loader
css-loader是解释CSS文件中的@import和url()，如import/require()，并将解析它们。
npm install css-loaderwebpack配置如下：
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: 'css-loader'
}
]
}
}- test属性，用于标识出应该被对应的loader进行转换的某个或某些文件。
- use属性，表示进行转换时，应该使用哪个loader。
链式loaders
css-loader只是解释了css文件，但并不能提供给浏览器直接使用，这时style-loader登场了。style-loader通过插入<style>标签将CSS添加到DOM中。
npm install style-loader但这意味着css文件要使用两个loader。这时候你可以通过链式来完成。
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将执行如下操作：
- Webpack将尝试解析style.css文件
- 文件名将与/\.css$/正则表达式匹配
- 该文件将由css-loader解释
- css-loader 的结果将传递给style-loader
- 最后，style-loader将返回一个JavaScript代码
默认情况下输出包是./dist/bundle.js。现在，此文件将包含将所有样式代码附加到<style>标签中。如果HTML中引入bundle.js文件，运行脚本后的输出将是这样的：
<!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-loader
经过上方的一番操作后，接下来您可以轻松地为项目添加sass/scss支持。在这里我们将使用sass-loader。
npm install node-sass sass-loaderSass-loader需要node-sass才能工作。现在你只需要将它添加到loader加载器链中去：
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
}现在，您可以导入SCSS文件了！在被css-loader解释之前，文件将从scss转换为纯css。
将options选项传递给loader加载程序
实际上，loader加载器可以接受其他options选项。让我们用url-loader的例子来解释它。
npm install url-loader file-loaderwebpack.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
}
}
]
}
]
}
};请注意，如果您希望将options选项传递给loader加载程序，则不再将loader加载程序作为字符串添加到use属性中。现在它是一个具有两个属性的对象：loader（加载器的名称）和options选项。
url-loader会将您的图像转换为base64 URI。如果你的图片非常小，那么性能上直接包含在代码中可能会更好。这将导致您的浏览器减少请求。如果您的图像很大，将它们作为单独的文件包含在内可能是有益的，这样浏览器可以并行获取它们。
这就是 url-loader具有limit属性的原因。它的大小（以字节为单位）决定了文件太大，无法作为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+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>由于big-background.png大于定义的限制，因此它以随机文件名复制到dist目录。icon.png文件已转换为base64 URI。
使用babel来转换JavaScript
另一个受欢迎的loader加载程序是babel-loader。它允许使用Babel转换JavaScript文件。它是用最新版本的javascript编写代码的解决方案。如果你想支持旧的浏览器，或者你想使用一些甚至是现代浏览器还没有实现的功能，这可能是有用的。
npm install babel-loader babel-core babel-preset-envwebpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};注意，我们在这里使用了exclude属性，它也是一个正则表达式。如果任何文件的路径与此表达式匹配，则不会转换该文件。
