使用webpack动态要求供应商模块-Java 学习之路

通常，对于静态需求或导入（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对这些情况很有用，但我无法理解 .

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

3 回答

您可以通过加载器创建用于导入和导出所需模块的文件 .

创建一个空文件"./vendors.js";
npm install exports-loader imports-loader --save-dev
在 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(',')
    },...]
    ...
}

在您需要供应商的模块中：

// import * as vendorsModules from './vendors';
var vendorsModules = require('./vendors');

var vendorModuleId = 'vendor-module';
...
var vendorModule = vendorsModules[vendorModuleId];
console.log('module', vendorModule);

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

回复于 2024-05-02T06:28:27+08:00

Webpack now supports dynamic loading，示例：

// js
const _ = await import(/* webpackChunkName: "lodash" */ 'lodash')

// webpack.config.js
output: {
  filename: '[name].bundle.js',
  chunkFilename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist')
},

该片段假设您还拥有Syntax Dynamic Import Babel Plugin .

回复于 2024-05-02T06:28:27+08:00

您可以使用dynamic loading动态引用模块路径：

// module.js
export default {
  init: () => console.log('module.init'),
};

// index.js
const id = 'module';
import(`./${id}.js`).then(obj => obj.default.init());

回复于 2024-05-02T06:28:27+08:00

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

3 回答

相关问题