webpack实战——预处理器(loader)【下篇】
写在前面
这是webpack实战
系列笔记的第6篇记录,前几篇记录如下:
- 打包第一个应用
- 模块化与模块打包
- 资源输入与输出
- 一切皆模块
- 预处理器【上篇】
在上一篇中根据一切皆模块的思想,学习了解了loader:概述、引入、配置及使用。本篇接着上篇的话题,讲述常用loader。
在我们项目开发中,尤其是目前流行的单页面应用,一些新手经常会在loader配置中有一些疑问,比如:
- 对于xx资源应该使用哪个loader?
- 实现xx功能配置哪个loader?
- ...
常用loader介绍
其实,在社区上每天都会有很多loader发布,开发者在选择loader的时候要多读一下loader文档,了解loader用法,优缺点,然后根据需求去挑选。接下来介绍几种常用loader。
1. babel-loader
作用
“babel-loader是用来处理ES6+并将其编译为ES5
安装
npm install babel-loader @babel/core @babel/preset-env
看这条安装指令,有几个参数,代表着什么呢?
- babel-loader:它是使Babel与Webpack协同工作的模块
- @babel/core:Babel编译器的核心模块
- @babel/preset-env:Babel官方推荐的预置器,可根据用户设置的目标环境自动添加所需要的插件和补丁来编译ES6+代码
示例
当然,知道了参数,也需要根据loader文档注意一些小细节,例如:
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
[
'env', {
modules: false
}
]
]
}
}
}
]
说明
-
babel-loader
一般对于js后缀文件生效, 而在node_modules
中所有插件有大量的js后缀文件,因此需要使用exclude
将其排除,避免打包时速度过慢; - 可以看到上面配置中添加了
cacheDirectory: true
的配置,意味着会启用缓存机制,在多次打包时,如果没有做过改变的模块不会二次编译,打包时只重新编译更改的模块,以此来加快打包速度; - 另外可以看到
@babel/presets-env
中配置为modules: false
,原因是 @babel/presets-env会自动将ES6 Module转化为CommonJS形式,会导致Webpack中的tree-shaking特性失效,而将modules配置为false后会禁用模块化语句的转化,将Module的语法交给Webpack本身去处理,来避免这一问题的发生。 - babel-loader支持从.babelrc文件读取Babel配置,因此也可以将presets和plugins从Webpack配置文件中提取出来,也能达到相同效果。
2. ts-loader
作用
“用于连接Webpack与TypeScript的模块
安装
npm install ts-loader typescript
配置
rules: [
{
test: /.ts$/,
use: 'ts-loader'
}
]
说明
学习或使用过typescript的开发者都知道,typescript的配置信息在工程目录下的tsconfig.jsson
中,因此在ts-loader
中不配置,直接对tsconfig.json
进行配置即可。如:
{
"compilerOptions": {
"target": "es5",
"sourceMap": true
}
}
3. html-loader
作用
“用于将HTML文件转化为字符串并进行格式化,这使得我们可以把一个HTML片段通过JS加载进来
安装
npm install html-loader
配置
rules: [
{
test: /.html$/,
use: 'html-loader'
}
]
使用示例
<!-- header.html -->
<header>
<h1>This is a Header.</h1>
</header>
// index.js
import Header from './header.html'
document.write(Header)
4. vue-loader
作用
“vue-loader用于处理.vue组件,类似如下示例形式,常与vue-template-compiler、css-loader配合使用。
安装
npm install vue-loader vue vue-template-compiler css-loader
包含有:
- vue
- vue-loader
- vue-template-compiler
- css-loader
vue组件示例
// App.vue
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'vue-loader',
data() {
return {
msg: 'vue-loader'
}
}
}
</script>
<style lang="css">
h1{
color: #f00;
}
</style>
配置
rules: [
{
test: /.vue$/,
use: 'vue-loader'
}
]
此处展示基础vue-loader示例,更多配置可以参考vue-loader官网文档
5. file-loader
作用
“用于打包文件类型的资源,并返回其PublicPath
安装
npm install file-loader
配置
以对图片(png、jpg、jepg、gif)为例来配置file-loader:
// webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output" {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.(png|jpg|jepg|gif)$/,
use: 'file-loader'
}
]
}
}
// index.js 测试
import testPng from './test.png'
console.log(testPng); // caj15a1123d2asf132c123cx132.jpg
6. url-loader
作用
“与file-loader类似,不同之处在于用户可以设置一个文件大小的阈值,小于该阈值时,返回的文件以base64形式编码,大于该阈值时返回publicPath
安装
npm install url-loader
配置
rules: [
{
test: /.(png|jpg|jepg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 10240,
name: '[name].[ext]',
publicPath: './assets-path/'
}
}
}
]
如此,如果目标文件资源大小小于设置的阈值,那么目标资源将会转化为base64形式编码。
小结
本篇着重接上一篇的loader配置,介绍了几种常用的loader及其作用和意义,如babel-loader、html-loader、vue-loader等,并配有简单的配置介绍,目的是对loader有基础的使用来促进更深的了解。回归本质,loader就是一个函数,能够处理相应功能的函数。第一个loader是源文件,之后所有loader是上一个loader的输出,最后一个loader则是输出给webpack。
除了JavaScript外,在打包方面另外一个重要工作就是样式处理。下一篇介绍webpack中对样式处理的模块。
- 如何使用R连接Hive与Impala
- Equation Group泄露工具之vBulletin无文件后门分析
- 如何使用CDSW在CDH集群通过sparklyr提交R的Spark作业
- 如何使用Beeline连接Impala
- 微软公式编辑器系列漏洞分析(一):CVE-2017-11882
- 预警揭秘:倒计时炸弹11.2.0.4前版本DB Link必须在2019年4月升级真相
- RPO攻击技术浅析
- 渗透技巧 | Windows上传并执行恶意代码的N种姿势
- 如何通过Cloudera Manager配置Spark1和Spark2的运行环境
- 从CPU漏洞Meltdown&Spectre看侧信道攻击
- 如何使用Java连接Kerberos的Kafka
- 隐藏在Chrome插件商店中的恶魔——恶意插件User-Agent Swither分析
- 如何使用CDSW在CDH中分布式运行所有R代码
- 如何在CDH中使用HBase快照
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法