webpack实战——预处理器(loader)【下篇】
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.jpg6. 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中对样式处理的模块。