Я новичок в Webpack и Babel, но, думаю, я вполне понял, как их использовать, хотя есть еще одна вещь, которую я не смог решить.
Вотпроблема ... По сути, у меня есть 3 файла JavaScript:
- setup.js
- loader.js
- main.js
setup.js - единственный файл, связанный с моими html-страницами, он содержит облегченный скрипт, который динамически вставляет некоторые необходимые ресурсы, включая loader.js
loader.js немного тяжелее и отвечает за загрузку и вставку всех оставшихся ресурсов, основываясь на некоторой логике, наконец, включая main.js, который содержит остальную часть моего кода.
Итак, порядок вставки: setup.js -> loader.js -> main.js
Я использую babel-загрузчик в Webpack для переноса и полифилинга этих 3 файлов (используя @ babel / preset-env иcore-js 3.0.0)
Дело в том, что, очевидно, я не хочу дублировать код в этих файлахе, и я не хочу, чтобы я добавил больше файлов в структуру, указанную выше.
В настоящее время я передаю 3 файла в Webpack в качестве объекта ввода со следующей конфигурацией:
(ПРИМЕЧАНИЕ: я генерирую конфигурацию Webpack динамически, но в этом случае результирующий упрощенный объект будет выглядеть следующим образом.)
{
entry: {
setup: 'path/to/setup.js',
loader: 'path/to/loader.js',
main: 'path/to/main.js',
},
mode: 'development',
output: {
filename: '[name].js',
path: 'output/path'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: '3.0.0',
proposals: false
}
}
]
],
configFile: false,
babelrc: false
}
}
}
]
},
watch: false,
node: false,
optimization: {
splitChunks: {
chunks: 'all',
minSize: 0
}
}
}
С этой конфигурацией мне удалось эффективно избежать дубликатов, которыеэто улучшение конфигурации по умолчанию (без пользовательской оптимизации каждый файл получает свои необходимые модули, даже если они также включены в другие файлы), но я получаю модули в отдельных файлах:
То, что я действительно хочу, это:
setup.js для загрузки и заполнения, затем loader.js НО игнорирование модулей, уже вставленных в setup.js и наконец, main.js НО снова игнорирование модулей, вставленных в первые два файла.Каждый файл, содержащий соответствующие модули (а не в отдельных файлах)
Мои последние параметры:
Вариант 1: Обратите внимание на изображение, что еслиФайлы vendors ~ ... были повторно объединены с начальными файлами в соответствии с указанным выше порядком вставки, и с помощью политики require-first он генерировал ожидаемый результат.(Я не знаю, могут ли эти файлы быть зверски объединены без дальнейших рассуждений).
Вариант 2: Я думал отделить Babel от Webpack ... Используйте Babel, чтобы добавить все требуют операторов в каждом файле отдельно.Затем прочитайте файлы и удалите повторяющиеся операторы require по порядку.Затем передайте файлы в Webpack самостоятельно. Но я действительно надеюсь, что есть более простая альтернатива! (Этот вариант, очевидно, позволил бы заключить сделку, но было бы невозможно оптимизировать распределение зависимостей модулей (у разных модулей могут быть общие зависимости, которые будут повторяться (?)), но я думаю, что это будет приемлемо (?))
Буду признателен за любое решение, предложение или совет.
Большое спасибо за потраченное время!