具有大量入口点的 Webpack

Question

我有一个基于 gulp 的巨大遗留项目。

该项目有超过 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

然后 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 个左右的索引，它必须保持这种状态，因为该应用程序是一个巨大的整体......艺术;）和单独的 css 文件除了索引文件外，还在很多地方使用。

是否可以通过 webpack 以某种方式处理这种情况？最近几天我一直在研究这个问题，但我觉得 webpack 更像是 one file in - one file out，我无法让它工作。我尝试了多个入口点，例如：https://github.com/webpack/docs/wiki/multiple-entry-points，但它要求您描述 100 条路径（与 gulp.src('./assets/src/**/*.scss') 相比），而且即使我这样做了，它也不起作用——编译单个路径非常困难文件和索引一次。

我的场景是否可以使用 Webpack 进行管理？它不会像地狱一样缓慢地工作吗？因为它对我来说似乎比 gulp 慢得多，即使是只有一个入口点的小型 React 项目也是如此。

感谢任何提示！

Answer 1

entry 可以接受返回 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);
})

您可能需要进行一些配置调整以优化性能：

cache-loader
babel-loader缓存options

具有大量入口点的 Webpack

Webpack with lots of entry points

webpack

sass

gulp

coffeescript