如何在Webpack v3中构建一个较少的编译链（gulp-style）？

Question

对于一个新项目，我必须保持webpack-only，因此需要找到一种方法来有效地编译我们的样式表。基本上是以非常粗鲁的方式：

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

所有这些，典型的gulp工作流程：

• 简化为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中对一组文件执行一系列$ thing看起来真的很难（除非它是一个连接的javascript模块图）。我确实找到something on globbing，但这还不够（合并css，cssnano，......）而且大多数情况下我根本无法将这些碎片粘在一起......

Answer 1

我已经使用gulp来构建更少的东西，并创建如下所示的相应地图：

第一步编译较少并在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。