如何在 Webpack v3 中构建更少的编译链（gulp 风格）？

Posted 2023-03-08

【中文标题】如何在 Webpack v3 中构建更少的编译链（gulp 风格）？

【英文标题】：How to build a less compilation chain (gulp -style) in Webpack v3?

【发布时间】：2018-03-01 14:16:39

【问题描述】：

对于一个新项目，我必须只保留 webpack 的东西，因此需要找到一种方法来有效地编译我们的样式表。基本上以一种非常笨拙的方式：

收集所有less-files，包括glob-patterns，如src/**/*.less（css顺序可能是任意的） 还允许导入 css 文件，例如 ../node_modules/vendor/**/*.css 或 3rdparty/master.less （如果我必须为此设置一个bogus.js 入口点，很好......）

还有一个典型的 gulp 工作流程：

将 less 转换为 css 合并（concat）less 和 css 让cssnano 完成优化工作，使用特定的 css nano 选项，例如orderedValues: false, normalizeWhitespace: true ... 写

styles.css

作为最终输出

当然还有：

在

styles.css.map

的链中保留源映射 高效观察和通常的惰性/增量编译（如 gulp 和 webpack 所拥有的）

我不需要需要的东西是css modules（css imported 进入节点模块以供“范围”使用，作为散列范围选择器出现... )

如何在 Webpack 中完成一个“典型的”less|css 处理工具链？

这个 SO 问题有我的 first attempt，我在组合后被困在中间的配置地狱中......

---

目前的考虑（有用与否）

我知道，对于 webpack，任何 资源，包括 css 甚至字体和图像都是一个“模块”......而不是将我的 css '模块'与实际的 js 合并（只是为了后来煞费苦心稍后再次将它们分开），并行有一个入口点cssstub.js（也称为multi-compiler mode）可能更明智。

但这确实是我的智慧结束的地方......在 webpack 中的一组文件上执行一系列 $things 似乎真的很难（除非它是一个连接的 javascript 模块图）。我确实找到了something on globbing，但这还不够（合并 css、cssnano、...）而且大多数情况下我根本无法将各个部分粘合在一起...

【问题讨论】：

你还没有问过问题。

你能使用一个使用webpack-stream的Gulp工作流吗？

【参考方案1】：

我已经使用 gulp 构建了 less 并创建了相应的地图，如下所示：

第一步编译较少，并在tmp文件夹中生成css

gulp.task('compile-less', function () 
    gulp.src('./*.less') // path to your file
    .pipe(less().on('error', function(err) 
        console.log(err);
    ))
    .pipe(gulp.dest('./tmp/'));
);

第二步缩小生成的css并创建地图文件

gulp.task('build-css', ['clean'], function() 
    return gulp.src('./tmp/**/*.css')
        .pipe(sourcemaps.init())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./compiled/css'));
);

如果你愿意，你可以添加额外的步骤来联系生成的 css。

【讨论】：

requested 是 webpack 中类似 gulp 的工作流。不是 gulp 中类似 gulp 的工作流程。