专栏首页前端技术分享|前沿资讯|读书分享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
                        }
                    ]
                ]
            }
        }
    }
]

说明

  1. babel-loader一般对于js后缀文件生效, 而在node_modules中所有插件有大量的js后缀文件,因此需要使用exclude将其排除,避免打包时速度过慢;
  2. 可以看到上面配置中添加了cacheDirectory: true的配置,意味着会启用缓存机制,在多次打包时,如果没有做过改变的模块不会二次编译,打包时只重新编译更改的模块,以此来加快打包速度;
  3. 另外可以看到@babel/presets-env中配置为modules: false,原因是 @babel/presets-env会自动将ES6 Module转化为CommonJS形式,会导致Webpack中的tree-shaking特性失效,而将modules配置为false后会禁用模块化语句的转化,将Module的语法交给Webpack本身去处理,来避免这一问题的发生。
  4. 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中对样式处理的模块。

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack实战——预处理器(loader)【上篇】

    当使用 babel-loader 将 ES6+ 代码转化为 ES5 时,带入公式:

    流眸
  • webpack实战——打包优化【上】

    在打工过程中,非常耗时的一个工作是使用loader将各种资源进行转译处理,例如常见的使用babel-loader将ES6+语法代码转译为ES5等。代码转移的工作...

    流眸
  • webpack实战——样式预处理

    在目前的前端项目中,经常可以看到使用SASS和LESS来对CSS进行处理,那么在webpack中如何配置?

    流眸
  • webpack4.0各个击破(6)—— Loader篇

    loader是webpack的核心概念之一,它的基本工作流是将一个文件以字符串的形式读入,对其进行语法分析及转换(或者直接在loader中引入现成的编译工具,例...

    大史不说话
  • wepack中loader的分类

    enforce 属性会影响 loader 种类。不论是普通的,前置的,后置的 loader。

    Qiang
  • webpack中的loader

    loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(t...

    刘亦枫
  • 看完这篇webpack-loader,不再怕面试官问了

    下面会从基本使用开始出发,探究一个loader怎么写,并实现raw-loader、json-loader、url-loader、bundle-loader

    lhyt
  • 从零搭建一个 webpack 脚手架工具(四)

    loader 的执行顺序是:从右到左、从下到上。在配置 sass 样式时,需要这么去写 loader:

    多云转晴
  • 手把手教你撸一个 Webpack Loader

    文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 ? 经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样,w...

    iKcamp
  • Webpack Loader

    Webpack不认识CSS(无法直接处理),就需要先由Loader加工一遍(预处理)

    ayqy贾杰

扫码关注云+社区

领取腾讯云代金券