Веб-пакет с множеством точек входа - PullRequest
Новая
       29

Веб-пакет с множеством точек входа

0 голосов
/ 16 июня 2019

У меня огромный унаследованный проект, основанный на глотке.

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

/assets/src/file1.sass
/assets/src/file2.coffee
/assets/src/foo/file3.sass
/assets/src/foo/bar/file4.sass
/assets/src/foo/bar/file5.coffee

Затем файлы кофе / sass обрабатываются с использованием gulp-sass и gulp-coffee, например: 

gulp.task('sass', function () {
  return gulp.src('./assets/src/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./dest/css'));
});

gulp.src('./assets/src/*.coffee')
  .pipe(sourcemaps.init())
  .pipe(coffee({ bare: true }))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./dest/js'));

У меня также есть несколько индексных файлов, которые просто @import содержат несколько других файлов, и они компилируются таким образом. Таким образом, на выходе у меня есть более 100 CSS-файлов с 20 или около того индексами, так и должно быть, потому что приложение является огромным монолитным произведением ... art;), и отдельные CSS-файлы используются во многих местах, кроме индексные файлы.

Можно ли как-то справиться с этим сценарием с помощью веб-пакета? Я исследовал эту проблему в последние дни, но мне кажется, что веб-пакет больше похож на one file in - one file out, и я не мог заставить его работать. Я пробовал несколько точек входа, как здесь: https://github.com/webpack/docs/wiki/multiple-entry-points, но это требует, чтобы вы описали 100 путей (по сравнению с gulp.src('./assets/src/**/*.scss')), также даже когда я делал это, это не работало - было чрезвычайно сложно скомпилировать отдельные файлы и индексы сразу.

Это мой сценарий, даже управляемый с Webpack? Разве это не работает медленно, как в аду? Потому что мне кажется, что это намного медленнее, чем глоток, даже с небольшими проектами React с одной точкой входа.

Спасибо за любые подсказки!

1 Ответ

0 голосов
/ 16 июня 2019

запись может принять функцию, возвращающую Promise, которая разрешает желаемую конфигурацию.Примерно так: 

entry: () => new Promise((resolve) => {
  const files = fs.readdirSync('./assets/src/').filter(name => name.match(/\.coffee$/));
  const entries = {};
  files.forEach(name => entries[name] = name);
  resolve(entries);
})

Для оптимизации производительности может потребоваться некоторая настройка конфигурации:

...