从零开始的webpack生活-0x014：CustomLoader自定义loader

taohonghui 发布于2019-08-21 17:32 / 2666人阅读

摘要：接下来将的本质和自定义。环境配置这一次需要两个项目，一个项目是，实现了，一个是，使用了。当然没有必要去真的重复制造轮子，只是为了掌握这种造轮子的技术，对理解整个工程，对理解功能提供更多思路而已。

0x001 概述

上一章我们讲了eslint-loader的配置，常用类型的常用loader已经都讲完了，大体上其他的都大同小异，需要去各大loader的官方查阅用户手册就可以了。接下来将loader的本质和自定义loader。

0x002 环境配置

这一次需要两个项目，一个项目是custome-loader，实现了custome-loader，一个是user，使用了custom-loader。

</>复制代码 
$ mkdir 0x0014-custome-loader
$ cd 0x0014-custome-loader

0x003 custome-loader实现

custome-loader项目配置

</>复制代码 
$ mkdir custome-loader
$ cd custome-loader
$ npm init -y

实现custome-loader

</>复制代码 
$ vim ./index.js
/**
 * 实现一个函数
 * 作用是将`var`替换成`let`
 * @param content 字符串
 * @returns string 字符串 */
    module.exports = function (content) {
        console.log(content)
        content = content.replace(/var/g, "let")
        console.log(content)
        return content;
         };

测试

</>复制代码 
$ vim ./test/index.js
// ./test/index.js
var custom = require("./../index")
custom("var name="张三"")
$ node  ./test/index.js
元数据 var name="张三"
处理之后 let name="张三"

0x004 custome-loader使用

配置

</>复制代码 
$ mkdir user
$ cd user
$ npm init -y
$ vim webpack.config.js
// ./webpack.config.js
const path = require("path");
module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    }
;

本地安装依赖

</>复制代码 
$ npm install --sve-dev /MY_PROJECT/PROJECT_OWN/webpack_study/0x014-custom-loader/custom-loader
# 输出
pm WARN user@1.0.0 No description
npm WARN user@1.0.0 No repository field.
+custom-loader@1.0.6
updated 1 package in 0.3s

修改配置

</>复制代码 
const path     = require("path");
module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test  : /.js$/,
                loader: "custom-loader",
            }
        ]
    }
}
;

打包

</>复制代码 
$ webpack
# 输出
元数据 var name="张三"
var age=14
处理之后 let name="张三"
let age=14
Hash: 4040662a699dbc91f8dd
Version: webpack 3.8.1
Time: 68ms
          Asset     Size  Chunks             Chunk Names
index.bundle.js  2.62 kB       0  [emitted]  index
   [0] multi ./src/index.js 28 bytes {0} [built]
   [2] ./src/index.js 25 bytes {0} [built]

查看打包结果

</>复制代码 
/* 1 */
/***/ (function(module, exports) {
let name="张三"
let age=14
/***/ })
/******/ ]);

可以看到，webpack在打包的时候，将./src/index.js的内容作为我们定义在custome-loader中的方法的参数，同时执行该方法，将处理后的返回值作为结果输出到./dist/index.bunle.js.

0x005 更多配置

这里只是实现了一个最简单的loader，而webpack官方还提供了许多其他的API来实现功能更加强大的loader，凭借这些API我们也可以写出自己的file-loader、json-loader之类的。当然没有必要去真的重复制造轮子，只是为了掌握这种造轮子的技术，对理解整个webpack工程，对理解web功能提供更多思路而已。

0x006 资源

源代码

GPU云服务器云服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

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

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

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x015：ExtractTextWebpackPlugin分离样式

摘要：概述上一章讲的是，这一章讲的是依旧是没有任何关系。配合插件自动插入修改配置打包并查看它以的形式被插入头部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，请查阅关于章节资源源代码 0x001 概述上一章讲的是Dll，这一章讲的是ExtractTextWebpackPlugin,依旧是没有任何关系。 0x002 插件介绍这个插件用来将css导出到单独文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 评论0 收藏0
从零开始的webpack生活-0x011：StylingLoader装载样式

0x001 概述上一章讲的是装载模板，这一章讲的是装载样式 0x002 配置环境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x010：TemplatingLoader装载模板

摘要：概述上一章讲的时候关于文件相关的，这一章讲的是模板相关的。环境配置栗子加载安装依赖包编写并引入配置低于否则使用打包并查看结果可以看到，被打包成了字符串，并封装成模块导出。更多资源，请查阅的仓库和官网资源源代码 0x001 概述上一章讲的时候关于文件相关的loder，这一章讲的是模板相关的loder。 0x002 环境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x012：TranspilingLoader装载脚本

摘要：概述上一章讲的是样式装载相关的，这一章见得是脚本加载相关的环境配置栗子加载安装依赖修改配置添加配置文件使用编写脚本打包并查看结果可以看到，语法被自动转化成了更多配置请查阅关于章节栗子加载安装依赖 0x001 概述上一章讲的是样式装载相关的loader，这一章见得是脚本加载相关的loader 0x002 环境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 评论0 收藏0