Webpack4教程 - 第二部分，使用loader处理scss,图片以及转换JS

时间 2019-11-11

标签 webpack4 webpack 教程第二部分使用 loader 处理 scss 图片以及转换栏目 JavaScript 繁體版

原文原文链接

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/javascript

今天继续咱们的Webpack 4入门教程。在介绍了Webpack的基本概念以后，是时候更深刻一点了。此次咱们会涉及Webpack中很是强大的一个东西:loader。首先，咱们会学习如何使用那些可用的loader。它将包括如何处理css、scss、图片以及对老版本的JavaScript语言的转换。让咱们开始吧！css

Webpack 4 入门教程继续 - 什么是loaders？

在以前的教程，我说Webpack是一个打包器。但这不是它仅有的目的。虽然Webpack天生只能理解JavaScript文件，但能够利用loader来改变这一点。除了可以处理多种类型的文件，Webpack还能修改它们。html

添加loader

使用loader最好的方式是在webpack.config.js文件中指定它们。要这么作，你须要添加module.rules属性。java

css-loader

css-loader可以翻译引入的css文件。node

npm install css-loader

考虑以下的配置webpack

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

rules

rules 这个属性是一个数组，指明你的各个loader。它会做用于匹配到 test 属性所指定规则的每个文件。这个规则，实际上，是一个正则表达式。程序员

use

属性 use 指明须要对匹配的文件应用那个loader。web

串联多个loader

有了上面的代码，你就可以在你的JavaScript代码中导入css文件了。（例如，使用以前咱们提到的ES6模块）正则表达式

但这还不能让css真正生效。咱们须要一种方法让浏览器可以使用这些css。这种状况下，style-loader就派上用场了。npm

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。如今，这个文件包含的代码会把全部的样式插入到<style>标签里面。若是你在HTML中引入了bundle.js的链接，在执行完脚本后，HTML会看起来像这样:

<!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 sass-loader

只须要在你的loader链里插入它:

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

就是这样，如今你能够引入scss文件了！文件在被 css-loader 解析以前，会从scss转译成纯css。

（译者注: 若是安装完sass-loader后，本地运行Webpack出现了和node-sass相关的错误，可尝试再安装一个node-sass的包解决这个问题，即npm install node-sass）

给loader传入选择项

实际上，loader能够接受一些选择项。让咱们用 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
            }
          }
        ]
      }
    ]
  }
};

注意，若是你想要给loader传入配置项，你再也不是把loader以字符串形式给 use 属性。如今它是一个对象，包含两个属性: loader（即loader的名字），和 options。

url-loader会把你的图片转换为base64格式的URI。若是你的图片文件很小，那么把它们直接引入到代码中会有更好的性能。这能够减小浏览器所发的请求数。可是，若是你的图片文件很大，那么把它们做为单独的文件引入可能会更好，由于浏览器能够并行加载它们。

这就是为何 url-loader 有一个 limit 属性。它指明了一个文件大小（以byte为单位），当超过这个大小时，文件将不会被转为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来编写代码的问题。若是你想支持老版本的浏览器，或者想使用现代浏览器尚未实现的功能，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