使用webpack动态要求供应商模块

Question

通常,对于静态需求或导入(CommonJS/ES导入),webpack可以要求/ node_modules /中的任何模块,例如:

var vendorModule = require('vendor-module');

但我想从/ node_modules/like动态加载模块:

var vendorModuleId = 'vendor-module';

...

var vendorModule = require(vendorModuleId);

这不起作用,因为webpack无法在编译时确定依赖关系,并且在我们可能想要动态加载某些供应商模块的情况下,在bundle中包含所有/ node_modules /显然是疯了.

我正在寻找一种方法来欺骗webpack 动态解析这些模块.最好通过webpack配置文件告诉webpack/node_modules /中的哪些模块应该包含在bundle中.

有人说ContextReplacementPlugin对这些情况很有用,但我无法理解.

任何人都知道如何做到这一点？提前致谢!

Answer 1

您可以创建一个文件，通过加载器导入和导出所需的模块。

1. 创建一个空文件“./vendors.js”；
2. npm install exports-loader imports-loader --save-dev

3. 在webpack.config.js：

   // config needed vendor modules
   var vendorModules = [
       'one', 'two', 'three', 'vendor-module'
   ];
   
   ...
   
   module.exports = {
   ...
       loaders: [{ // Add loader
           include: require.resolve('./vendors.js'),
           loader: 'imports-loader?' + vendorsModules.map(function(module, index) {
               return 'dep' + index + '=' + module;
           }).join(',') + '!exports-loader?' + vendorsModules.map(function(module, index) {
               return module + '=dep' + index;
           }).join(',')
       },...]
       ...
   }
   

4. 在需要供应商的模块中：

   // import * as vendorsModules from './vendors';
   var vendorsModules = require('./vendors');
   
   var vendorModuleId = 'vendor-module';
   ...
   var vendorModule = vendorsModules[vendorModuleId];
   console.log('module', vendorModule);
   

它将把已配置的供应商添加到您的捆绑包中。如果您需要延迟加载这些模块，则需要使用更复杂的模块工厂require.resolve和类似承诺的接口来获取所需的模块。