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

Question

在首页，我有一个“松散”的CSS文件(@导入其他CSS文件)，我想作为全局CSS样式为网站加载。站点本身正在进行改造，但它还没有完全准备好完成整个模块加载系统，所以目前，客户端将首先访问一个相当于index.html的组件(在它下面将是模块加载组件，我将使用webpack来转换这些组件)

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

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

我是否必须在该文件上单独运行PostCSS之类的程序？或者显式加载PostCSS并在webpack配置中运行它(如果是这样的话，最好的实现方式是什么？)。

Answer 1

现在，我使用来自PostCSS网站的JS示例，以便将其作为在全局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);
        });
});