从零开始的webpack生活-0x017：CustomPlugin自定义插件

springDevBird 发布于2019-08-21 17:36 / 1023人阅读

摘要：概述上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。打包并查看文件更多配置请查阅关于自定义章节资源源代码

0x001 概述

上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。

0x002 环境配置

$ mkdir 0x0016-other-plugin
$ cd 0x0016-other-plugin
$ 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].[chunkhash].js"
    }
;

0x003 栗子1-最简单的插件

编写插件，这个插件会子安控制台输出一句hello plugin

// ./CustomPlugin.js
function UpdatePackageVersionPlugin(options) {
    console.log("hello plugin")
}
CustomPlugin.prototype.apply = function (compiler) {
};

module.exports = CustomPlugin;

引用该插件

const path                     = require("path");
var CustomPlugin = require("./CustomPlugin")

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },

    plugins: [
        new CustomPlugin({options:true})
    ]
};

打包并查看控制台

$ webpack
# ↓↓↓↓↓↓↓↓↓↓↓插件输出
hello plugin
# ↑↑↑↑↑↑↑↑↑↑↑插件输出
The compiler is starting to compile...
The compiler is starting a new compilation...
The compilation is starting to optimize files...
The compilation is going to emit files...
Hash: 8daa4edb5544a8f81c35
Version: webpack 3.8.1
Time: 58ms
          Asset    Size  Chunks             Chunk Names
index.bundle.js  2.6 kB       0  [emitted]  index
   [0] multi ./src/index.js 28 bytes {0} [built]
   [2] ./src/index.js 14 bytes {0} [built]

0x004 栗子2-偷偷添加资源

修改插件，这个插件会读取打包好的资源文件，并写入到filelist.md文件，保存到dist目录下。

function CustomPlugin(options) {
    console.log("hello plugin")
}

CustomPlugin.prototype.apply = function (compiler) {
    compiler.plugin("emit", function (compilation, callback) {
        // Create a header string for the generated file:
        var filelist = "In this build:

";

        // Loop through all compiled assets,
        // adding a new line item for each filename.
        for (var filename in compilation.assets) {
            filelist += ("- "+ filename +"
");
        }

        // Insert this list into the webpack build as a new file asset:
        compilation.assets["filelist.md"] = {
            source: function() {
                return filelist;
            },
            size: function() {
                return filelist.length;
            }
        };

        callback();
    })
};

module.exports = CustomPlugin;

打包并查看文件

$ webpack
$ ls ./dist
filelist.md
index.bundle.js
$ cat filelist.md
// ./filelist.md
In this build:

- index.bundle.js

3. 更多配置请查阅[webpack关于自定义plugin章节][3]

### 0x005 资源
- [源代码][4]


  [1]: https://segmentfault.com/a/1190000011976221
  [2]: https://segmentfault.com/a/1190000011976221
  [3]: https://webpack.js.org/contribute/writing-a-plugin/

云服务器 GPU云服务器自定义插件自定义ckeditor插件 js插件自定义从零开始的邮件服务器

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

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

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

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

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x006：providerPlugin全局定义

摘要：插件介绍就是提供全局变量啦全局定义栗子初始化项目安装依赖包编写添加插件，并定义调用打包并用浏览器打开查看控制台全局定义自定义函数栗子添加定义添加文件调用打包并执行输出资源源代码 0x001 概述上一章讲的是definePlugin的用法，和这一章依旧没有任何关系，这一章讲的时候providerPlugin。 0x002 插件介绍就是提供全局变量啦 0x003 全局定义jquery栗...

li21 2019-08-21 17:28 评论0 收藏0
从零开始的webpack生活-0x003：html模板生成

摘要：生成多页面修改配置自动插入标题第二个页面打包并查看文件夹结构这是一个模板文件这是一个模板文件此时的配置自动插入标题第二个页面其他配置看这里资源源代码 0x001 概述上一章之后已经可以自动刷新浏览器了，大大方便了我们的开发，这章开始讲插件，第一个插件将会解决上一章节的一个问题，那就是index.html需要手动插入打包好的js，同时不会将index.html一起放到dist文件夹下的...

ZHAO_ 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x016：OtherPlugin其他常用

摘要：概述上一章讲的是分离样式，这一章讲的是剩下的一些我常用的插件和上一章是没有任何关系。环境搭建定义环境插件介绍这个插件用来定义环境变量的，直接定义在了下。安装依赖添加资源修改配置打包其他更多配置请查阅关于资源源代码 0x001 概述上一章讲的是分离样式，这一章讲的是剩下的一些我常用的插件,和上一章是没有任何关系。 0x002 环境搭建 $ mkdir 0x0016-other-plug...

chinafgj 2019-08-21 17:36 评论0 收藏0
从零开始的webpack生活-0x005：DefinePlugin奇妙用处

摘要：注意该插件是简单的字符串替换，所以如果是定义常量最好使用包裹要替换的内容，或者使用转化，否则会变成代码直接插入，比如版本号这样替换的时候就会变成而不会变成导致错误的数据格式。 0x001 概述上一章讲的是js压缩混淆，和这一章没有半毛钱关系，这章讲的是DefinePlugin，一个好像没有用，但其实很好用的一个插件，我很喜欢，嘿嘿嘿！ 0x002 插件介绍说白了，这是一个简单的字符...

The question 2019-08-21 17:28 评论0 收藏0