Webpack 4 教程 - 2 . 使用加载器来处理scss，image文件及转译js

最新推荐文章于 2024-08-12 08:30:00 发布

weixin_33693070

最新推荐文章于 2024-08-12 08:30:00 发布

阅读量192

点赞数

文章标签： webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016615504

版权

今天我们继续webpack 4教程。在了解了webpack的基本概念之后，我们进一步深入。这一次我们将触及webpack里强大的加载器（loaders）。我们首先学习如何使用现有可用的加载器。包括处理css、scss、image文件及把新版（es6）javascript编写的代码转译成（浏览器支持的）老版（es5）代码，Let's go！

Webpack教程之续篇 - 什么是加载器？

在上一篇教程中，我说过webpack是一个模块打包器（module bundler）。但这不是它唯一的目标，尽管webpack本身固有只能理解javascript文件，但可以通过使用加载器来改变此限制。除此之外，对于许多类型的文件来说，加载器在处理过程中还可以对其进行修改。

添加加载器

使用加载器最好的方式是在webpack.config.js文件中指定它们。这么弄的话，需要在webpack.config.js中添加一个module.rules属性。

css 加载器

css加载器用来处理导入的css文件

我们来考虑一下下面的配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: 'css-loader'
      }
    ]
  }
}

rules

rules属性是加载器的数组。实际上，依据规则中test属性中的正则表达式来判断文件类型，从而将相应的加载器应用到对应类型的文件上。

学习更多关于正则表达式的知识, 请查读我的正则表达式教程

use

规则的use属性表明哪种类型的文件使用哪个加载器

加载器链

上面的代码中，你能在javascript代码中导入css文件（例如使用我们上一教程中提到过的es6模块）。
但实践中这还不能让css起作用。我们还需要把这些代码加载到浏览器中才行（译注：就是将样式自动插入到<style>标签中）。此时，该style加载器（style-loader）出手了。

npm install style-loader

但这意味着要用两个加载器来处理css（类型的）文件。你能通过加载器链来做到这一点。

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
}

就如你看到的那样，现在我们给use属性赋值了一个数组。非常重要的一点是加载器链是从右往左执行的（译注：即首先css-loader处理，然后把处理后结果给到style-loader再去处理）

/* style.css */

body {
  background-color:black;
}

// index.js

import './style.css';

使用上面的配置将这样工作：

Webpack找到style.css文件
这个文件名匹配到/.css$/ 正则表达式
css-loader处理这个文件
处理的结果传给style-loader
最后，style-loader返回一段javascript代码(译注：这段代码执行的结果就是把样式插入到<style>标签中）

默认输出的打包文件是./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-loader,以支持sass/scss。

npm install sass-loader

（译注：还需要安装node-sass这个包，即 npm install node-sass）

将其添加到加载器链中

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
}

如此，现在你就能导入scss文件了！ scss文件在被css-loader解释之前，先被sass-loader转译为纯css。

加载器的可选参数

实际上，加载器可以接受可选的参数来配置。我们用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
            }
          }
        ]
      }
    ]
  }
};

注意，如果你想给加载器传递可选项，use属性不再是（加载器名字）的字符串了。现在它要求是一个对象，其有两个属性：loader（表示加载器名）和options。

url-loader将把图像转为base64 URIs。如果图像非常小的话，（用base64）直接包含在代码中将提高性能。因为这样减少了浏览器请求的次数。如果图像比较大的话，则把它放在单独分离的文件中更好，这时浏览器可并行的加载它们。

这就是为什么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

另一个流行的加载器是babel-loader。它通过Babel来转译javascript文件。使用最新版的javascript来写代码，要让其能运行在较老的浏览器上;或者你应用了一些新功能，就算现代浏览器也还没实现支持这些功能的话，你可能就需要用babel-loader来解决你的麻烦了。

npm install babel-loader babel-core babel-preset-env

译注：按照npm官方包命名的新政，babel-core改名为@babel/core, babel-preset-env改为@babel/preset-env，因此我们应该这样安装：

npm install babel-loader @babel/core @babel/preset-env

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

注意，我们在这里使用了exclude属性，它也是一个正则表达式。如果文件的路径匹配上了这个正则的话，这个文件就不会被转译。

babel官方发布了许多presets来满足你的需要。请查阅babel的官方文档（译注：基本上，你就使用@babel/preset-env就好了，不用考虑其它的，有些已过时了）。你也可以去这里体验一下在线转换。

小结

这一回我们学习了webpack中非常有用的功能：加载器。我们接触到了一些现有成熟的加载器。通过使用它们，我们使得项目能支持scss了。除此之外，我们还学习了使用url-loader来处理图像。我们还讨论了另外一个很普遍的用法，即通过使用Babel来转译javascript。后面的教程中，我们还将深挖加载器，包括自己写一个。