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

然后使用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个具有20个左右索引的css文件，它必须保持这种状态，因为该应用程序是一件巨大的整体艺术品……），并且除其他地方外，许多其他地方都在使用单独的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慢得多。

感谢任何提示！

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有很多入口点

1 个答案: