利用 VModule webpack plugin 创建虚拟模块

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 的值" }
    原文作者:Houfeng
    原文地址: https://segmentfault.com/a/1190000010374195
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞