利用 VModule webpack plugin 建立虛擬模組

Houfeng發表於2019-02-16
WebPlugin

VModule webpack plugin

VModule 是一個用於建立虛擬模組 webpack 外掛。

大約有如下使用場景:

  • 需要在構建階段將動態計算後結果生成一個模組
  • 構建後的執行時程式碼需要引用一些構建階段的環境變數或其它資料

安裝

$ npm i vmodule-webpack-plugin --save

使用

在 webpack.config.js 中配置 VModule

const webpack = require(`webpack`);
const VModulePlugin = require(`vmodule-webapck-plugin`);

module.exports = {
  ...
  plugins: [
    //返回物件的虛擬模組
    new VModulePlugin({
      name: `demo-module1`,
      handler: function() {
        return { name: `demo`, env: process.env.NODE_ENV };
      }
    }),
    //返回程式碼的虛擬模組
    new VModulePlugin({
      name: `demo-module2`,
      code: true
      handler: function() {
        reutrn `
          exports.say = function(text) {
            console.log(`say:`, text);
          };
        `;
      }
    })
  ]
  ...
};

在程式碼中使用虛擬模組

const module1 = require(`demo-module1`);
const module2 = requrie(`demo-module2`);

module2.say(JSON.stringify(module1));

//列印
//say: { "name": "demo", "env": "NODE_ENV 的值" }

相關文章