Webpack 有很多入口点答案

【问题标题】：Webpack with lots of entry pointsWebpack 有很多入口点
【发布时间】：2019-10-30 09:00:51
【问题描述】：

我有一个基于 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

然后使用 gulp-sass 和 gulp-coffee 处理咖啡/sass 文件，如下所示：

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 多个带有 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 进行管理？它不会像地狱一样缓慢工作吗？因为即使对于只有一个入口点的小型 React 项目，它似乎也比 gulp 慢得多。

感谢任何提示！

【问题讨论】：

标签： webpack sass gulp coffeescript

【解决方案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

【讨论】：