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

时间 2019-12-06

标签 webpack 教程使用加载处理 scss image 文件转译栏目 JavaScript 繁體版

原文原文链接

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

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

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

添加加载器

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

css 加载器

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

咱们来考虑一下下面的配置node

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

rules

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

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

use

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

加载器链

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

npm install style-loader

但这意味着要用两个加载器来处理css（类型的）文件。你能经过加载器链来作到这一点。正则表达式

// webpack.config.js

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

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

/* 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。后面的教程中，咱们还将深挖加载器，包括本身写一个。