Динамически требовать несколько файлов с помощью веб-пакета DefinePlugin?

Question

У меня есть массив имен файлов, которые я хочу импортировать.Имена файлов вычисляются во время сборки.Если у меня есть одно имя файла, я могу сделать:

new webpack.DefinePlugin({
  component_file: '"path/Component"',
})

Затем в источнике:

require(component_file);

Это включает в себя path/Component в сборке, как и ожидалось.

Однако, если я попробую следующее, это не сработает.

new webpack.DefinePlugin({
  component_files: ['"path/Component"', '"path/Component2"'],
})

Тогда в источнике:

// component_files is converted object by Webpack.
Object.keys(component_files).forEach(file => require(file));

Это вызывает ошибку Cannot find module '0'.Это имеет смысл, потому что Webpack просто выполняет статический анализ, он не может обрабатывать require s с переменными в качестве аргумента.Можно ли сделать то, что я пытаюсь сделать?

Answer 1

Для достижения динамического объединения по переменным окружения, вы должны обернуть операторы require в условные блоки, которые будут определены как «мертвый код» или нет.
Затем, во время сборки, этот оператор require будетбыть удаленным, что приведет к исключению из окончательного пакета.

Предикат каждого условного блока должен оцениваться как логическое значение во время сборки.Это может произойти, только если предикат представляет собой простое сравнение между двумя примитивными значениями или чисто логическим значением.Например:

// webpack.config.json
new DefinePlugin({
  "process.env.component_a": "true",
  "process.env.component_b": "false",
  "process.env.component_c": "'true'",
})

// in application:
if (process.env.component_a) {
  const a = require('./a') // will be included
}
if (process.env.component_b) {
  const b = require('./b') // will be excluded
}

if (process.env.component_c === "true") {
  const c = require('./c') // will be included
}

Важное примечание
Недостаточно оставить значение undefined недостаточно для исключения модуля из окончательного комплекта.

/* THE WRONG WAY */

// webpack.config.json
new DefinePlugin({
  "process.env.component_a": "true",

})

// in application:
if (process.env.component_a) {
  const a = require('./a') // will be included
}
if (process.env.component_b) {
  // even though this block is unreachable, b will be included in the bundle!
  const b = require('./b') 
}

Answer 2

Вместо того, чтобы использовать DefinePlugin для определения зависимостей, которые затем требуются в вашем приложении, вы можете включить их в качестве записей в вашей конфигурации, чтобы они были включены во время компиляции:

{
  entry: [
    ...component_files,
    'app.js'
  ]
}