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

Question

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

• 收集所有不太文件,包括圆顶封装体图案像src/**/*.less(CSS顺序可以是任意的)
• 也允许导入css文件,比如说../node_modules/vendor/**/*.css或3rdparty/master.less
  • (如果我必须设置一个bogus.js入口点,那很好......)

所有这些,典型的gulp工作流程:

• 少转向css
• 合并(concat)less和css
• 有cssnano做它的优化工作,与像例如特定的CSS纳米选项orderedValues: false, normalizeWhitespace: true...
• 写styles.css为最终输出

而且当然:

• 让源图在这个链中幸存下来 styles.css.map
• 高效的观看和通常的懒惰/渐进式编译(如gulp 和 webpack一样)

我做的事情并不需要的是css modules(CSS imported成"作用域"使用,出来哈希范围的选择节点模块...)

如何在Webpack中完成'典型'少量| css处理工具链？

这个问题是我的第一次尝试,在合并之后我被困在中间的配置中...

---

到目前为止的考虑(有帮助或没有)

我知道,对于webpack,包括css甚至字体和图像在内的任何资源都是一个"模块"......而不是将我的css"模块"与实际的js合并(后来再次将它们再次精心地分开),它可能是更聪明,有一个cssstub.js并行的入口点- 也称为多编译器模式.

但那真的是,我的智慧结束了......在webpack中对一组文件执行一系列$ thing似乎真的很难(除非它是一个连接的javascript模块图).我确实在globbing上找到了一些东西,但这还不够(合并css,cssnano,......)而且大多数时候我根本无法将这些碎片粘在一起......

Answer 1

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

第一步编译 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。