资讯专栏INFORMATION COLUMN

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

Jioby / 2618人阅读

摘要:它将包括如何处理图片以及对老版本的语言的转换。添加使用最好的方式是在文件中指定它们。而相反,文件被转换为了。它允许你使用转译文件。此外,我们还学习如何使用处理图片。在教程未来的部分,我们会深入到中,包括写一个我们自己的。

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

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

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

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

添加loader

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

css-loader
css-loader能够翻译引入的css文件。

npm install css-loader

考虑如下的配置

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

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

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

串联多个loader
有了上面的代码,你就能够在你的JavaScript代码中导入css文件了。(例如,使用文章上面我们提到的ES6模块

但这还不能让css真正生效。我们需要一种方法让浏览器能够使用这些css。这种情况下,style-loader就派上用场了。

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。现在,这个文件包含的代码会把所有的样式插入到

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");
}

上面的配置会得到下面的结果:

因为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/power...

本文是由葡萄城技术开发团队发布,转载请注明出处:葡萄城官网

了解开放易用的 Web 生成平台,请前往活字格Web应用生成平台

了解可嵌入您系统的在线 Excel,请前往SpreadJS纯前端表格控件

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113909.html

相关文章

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

    摘要:它将包括如何处理图片以及对老版本的语言的转换。添加使用最好的方式是在文件中指定它们。而相反,文件被转换为了。它允许你使用转译文件。此外,我们还学习如何使用处理图片。在教程未来的部分,我们会深入到中,包括写一个我们自己的。 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概...

    xiaodao 评论0 收藏0
  • webpack4 系列教程(六): 处理SCSS

    摘要:只需要在处理的配置上增加编译的即可。了解更多处理的内容本节课源码所有课程源码教程所示图片使用的是仓库图片,网速过慢的朋友请移步原文地址系列教程六处理。根据规则放在最后的首先被执行。 这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。了解更多处理css的内容 >>> >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是...

    马龙驹 评论0 收藏0
  • webpack4 系列教程(七): SCSS提取和懒加载

    摘要:教程所示图片使用的是仓库图片,网速过慢的朋友请移步原文系列教程七提取和懒加载。个人技术小站有空就来看看我一直都在本节课讲解在中的提取和懒加载。值得一提的是,和在的懒加载上的处理方法有着巨大差别。 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载。 个人技术小站: https://godbmw.c...

    崔晓明 评论0 收藏0
  • webpack4 系列教程(五): 处理CSS

    摘要:版本和版本并没有特别的出入。需要注意的是,在老式浏览器中,对标签的数量是有要求的。这样,方便开发者根据业务需要,对进行相关处理。需要注意的是是在引入前根据需要修改,所以之后是不会改变的。重新刷新页面,才会是红色。 这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。 >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是 github 仓库图...

    nevermind 评论0 收藏0
  • webpack4详细教程,从无到有搭建react脚手架(三)

    摘要:相关链接详细教程,从无到有搭建脚手架一详细教程,从无到有搭建脚手架二安装配置创建,效果安装配置创建效果配置模式修改配置现在编译后的由动态内联在中,需要分离到单独的文件安装插 相关链接 webpack4详细教程,从无到有搭建react脚手架(一) webpack4详细教程,从无到有搭建react脚手架(二) Css 安装loader yarn add style-loader css...

    Sunxb 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<