從零開始的webpack生活-0x017：CustomPlugin自定義插件

springDevBird 發布于2019-08-21 17:36 / 1054人閱讀

摘要：概述上一章講的是其他一些常用的小插件，這一章講的是自定義插件。打包并查看文件更多配置請查閱關于自定義章節資源源代碼

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插件自定義從零開始的郵件服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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