转载请注明出处：.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来编写代码的问题。如果你想支持老版本的浏览器，或者想使用现代浏览器还没有实现的功能，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。

——近期，恰逢葡萄城成立30周年，葡萄城联合博客园诚邀你参与《2018程序员生存现状调查》活动，参与即有机会赢取千元大奖，并和千万程序猿（媛）共同交流、分享。
详情了解：https://www.cnblogs.com/powertoolsteam/p/gc-30th-anniversary.html