如何配置 webpack 以加载和优化 CSS 文件

Question

在首页，我有一个“松散”的 CSS 文件（@imports 其他 CSS 文件），我想将它作为全局 CSS 样式为网站加载。该网站本身正在改造，但它还没有准备好完成整个模块加载系统，所以目前，客户端将首先点击一个 index.html 的等价物（并且在它下面将是模块加载的组件，我'将使用 webpack 进行编译）

我希望能够使用 webpack 获取全局 CSS 并对其进行优化（通过 PostCSS 和其他插件）。但看起来 webpack 只喜欢实际的基于 javascript 的入口点。

我的策略是告诉 webpack 使用全局 CSS 作为入口点，并生成一个优化和捆绑的 CSS，其中包含该全局 CSS 中的所有 @imported CSS。

我是否必须在该文件上单独运行 PostCSS 之类的东西？或者显式加载 PostCSS，然后在 webpack 配置中运行它（如果是这样，最好的方法是什么？）。

Answer 1

目前，我正在使用 PostCSS 网站上的 JS API 示例，以便将其用作读取我的全局 CSS 并将其转换为普通 CSS 以包含在首页中的基础。

（来自JS API sample）

const fs = require('fs');
const postcss = require('postcss');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

fs.readFile('src/app.css', (err, css) => {
    postcss([precss, autoprefixer])
        .process(css, { from: 'src/app.css', to: 'dest/app.css' })
        .then(result => {
            fs.writeFile('dest/app.css', result.css);
            if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
        });
});