Webpack4干货分享(二)，使用loader处理scss,图片以及转换JS

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

今天继续我们的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'

使用上面的配置，打包的工作方式大概是:

  1. Webpack尝试解析  style.css  文件

  2. 文件名与正则表达式 /\.css$/ 匹配

  3. 文件被  css-loader  编译

  4. css-loader  处理后的结果会被传到  style-loader

  5. 最后， 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。

关于葡萄城：

赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。


本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/450577.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

spring-data-jpa 介绍 复杂查询，包括多表关联，分页，排序

spring-data-jpa 介绍 复杂查询，包括多表关联，分页，排序

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 本篇进行Spring-data-jpa的介绍&#xff0c;几乎涵盖该框架的所有方面&#xff0c;在日常的开发当中&#xff0c;基本上能满足所有需求。…
阅读更多...
重写laravel的request的校验器

重写laravel的request的校验器

protected function failedValidation(Validator $validator) {$error $validator->errors()->all();throw new HttpResponseException(response()->json([data>[],code>500,msg>$error[0]], 500)); }
阅读更多...
如何检测C语言中的内存漏洞(leak)?

如何检测C语言中的内存漏洞(leak)?

在动态分配的内存单元(即由函数malloc()或ealloc()分配的内存单元)不再使用却没有被释放的情况下&#xff0c;会出现内存漏洞。未释放内存单元本身并不是一种错误&#xff0c;编译程序不会因此报告出错&#xff0c;程序也不会因此而立即崩溃。但是&#xff0c;如果不再使用而又…
阅读更多...
Oracle中row_number()、rank()、dense_rank() 的区别

Oracle中row_number()、rank()、dense_rank() 的区别

link:https://www.cnblogs.com/qiuting/p/7880500.html转载于:https://www.cnblogs.com/Spring-Rain/p/9716213.html
阅读更多...
Vim使用教程(按键教程，映射都可以改的，持续更新)

Vim使用教程(按键教程，映射都可以改的，持续更新)

修改映射 tnvim .vimrc 1、spaceft 调出目录 2、controlh 跳到目录 3、controll 跳到内容页 4、spacekn 运行最近一个测试 5、spacekf 运行整个测试文件 6、spacekl 运行最后一个测试 7、sv 分屏 8、sq 退出分屏 9、controlp 搜索功能 10、/搜索内容 N向上…
阅读更多...
Alpha 冲刺五

Alpha 冲刺五

团队成员 051601135 岳冠宇051604103 陈思孝031602629 刘意晗031602248 郑智文031602234 王淇会议照片 项目燃尽图 项目进展 暂无实质性进展。 项目描述 问题困扰&#xff1a; 商品分类出现困惑。交互部分向服务器发送请求失败&#xff0c;安卓在4.0后对网络请求有限制要求&…
阅读更多...
什么是换码符(escape character)?

什么是换码符(escape character)?

换码符是用来执行一个命令或一项任务的字符&#xff0c;它们不会被打印到屏幕上。例如&#xff0c;一个换码符可以是这样一个字符&#xff0c;它被传递给一个设备&#xff0c;告诉计算机屏幕以红色而不是通常的白色来显示下一行。这个换码符将和真正要被设备以红色来显示的字符…
阅读更多...
java日期工具类DateUtil

java日期工具类DateUtil

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 DateUtil类 [java] view plain copy package com.util; import java.text.SimpleDateFormat; import java.util.ArrayList; import…
阅读更多...
Command 传参的几种方式

Command 传参的几种方式

Command可以根据CommandParameter传参 关键代码 public ICommand SubmitCommand > _submitCommand; private RelayCommand _submitCommand new RelayCommand(new Action<object>(ShowMessage)); private static void ShowMessage(object obj) {MessageBox.Show(obj.T…
阅读更多...
phpStorm重构快捷键（mac系统、持续更新）

phpStorm重构快捷键（mac系统、持续更新）

参考 https://learnku.com/laravel/t/5420/your-keyboard-shortcuts-please 1、ctrlaltf 将表达式提取出来使其成为类的属性&#xff0c;并自动更新引用。 2、ctrlaltp 将表达式变成由参数传入 3、crtlF6 修改函数签名&#xff08;函数名&#xff0c;函数参数&#xff09…
阅读更多...
python -m xxx.py和python xxx.py的区别

python -m xxx.py和python xxx.py的区别

先看下python -m site作用是显示sys.path的值内容&#xff0c;也就是python搜索模块的目录&#xff0c;作用类似于linux下的PATH python -m SimpleHTTPServer 会在sys.path的所有路径下查找SimpleHTTPServer.py文件&#xff1b; 而python SimpleHTTPServer.py则是在当前查找文…
阅读更多...
C语言多维数组与多级指针

C语言多维数组与多级指针

多维数组与多级指针也是初学者感觉迷糊的一个地方。超过二维的数组和超过二级的指针其实并不多用。如果能弄明白二维数组与二级指针&#xff0c;那二维以上的也不是什么问题了。所以本节重点讨论二维数组与二级指针。一、二维数组 1、假想中的二维数组布局我们前面讨论过&…
阅读更多...
spring-data-jpa 使用

spring-data-jpa 使用

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 只是记录下使用方法 &#xff1a; 1. RPC接口 service实现类调用&#xff0c;PageRequest对象会实现分页、排序。 Overridepublic Obj…
阅读更多...
docker的安装与安装mysql(mac,centos为例)

docker的安装与安装mysql(mac,centos为例)

一、mac安装docker 1、去这个网站下载安装https://www.docker.com/get-started 2、运行docker 运行开启docker docker run -dp 80:80 docker/getting-started 二、centos8安装docker 1、安装docker 下载低版本的 yum install -y docker-ce --nobest 2、安装扩展 wget http…
阅读更多...
配置PPPOE

配置PPPOE

先配置服务端PPPOE-Server先为路由添加一个账号为PPP所使用[PPPOE-Server]aaa [PPPOE-Server-aaa]local-user test password cipher 123 //添加一个本地账号[PPPOE-Server-aaa]local-user test service-type ppp//设置test账号类型为PPP账号[PPPOE-Server]ip pool test//添加一…
阅读更多...
eclipse弃坑记第一篇之在idea上配置Tomcat环境并创建Javaweb项目的详细步骤原创

eclipse弃坑记第一篇之在idea上配置Tomcat环境并创建Javaweb项目的详细步骤原创

IntelliJ IDEA是一款功能强大的开发工具&#xff0c;在代码自动提示、重构、J2EE支持、各类版本工具(如git、svn、github)、maven等方面都有很好的应用。 IntelliJ IDEA有免费的社区版和付费的旗舰版。免费版只支持Java等为数不多的语言和基本的IDE特性&#xff0c;旗舰版还支持…
阅读更多...
laravel安装prettier，git hook代码格式化工具

laravel安装prettier，git hook代码格式化工具

1、安装prettier的php扩展 npm install --global prettier prettier/plugin-php 2、安装husky&#xff0c;lint-staged&#xff08;git钩子&#xff09;使用 npm i prettier lint-staged husky -D 3、修改package.json文件 在scripts后面添加两个函数 "husky": …
阅读更多...
C语言指针数组和数组指针

C语言指针数组和数组指针

一、指针数组和数组指针的内存布局 初学者总是分不出指针数组与数组指针的区别。其实很好理解&#xff1a;指针数组&#xff1a;首先它是一个数组&#xff0c;数组的元素都是指针&#xff0c;数组占多少个字节由数组本身决定。它是“储存指针的数组”的简称。 数组指针&#xf…
阅读更多...
求二叉树的高度

求二叉树的高度

1 int GetHeight(BinTree BT)2 {3 int HL, HR, MaxH;4 5 if(BT)6 {7 HL GetHeight(BT->Left); //求左子树的高度8 HR GetHeight(BT->Right); //求右子树的高度9 MaxH (HL > HR) ? HL : HR; //取左右子树较大的高…
阅读更多...
Json与List的相互转换

Json与List的相互转换

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 问题由来&#xff1a; 最近由于做一个项目&#xff0c;项目的一个功能就是根据Listview的内容生成一个二维码&#xff0c;然后扫描二维…
阅读更多...
最新文章

Copyright @ 2022~2023