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

在首页上，我有一个“松散”的CSS文件（它@imports其他CSS文件），我想作为全局CSS样式加载到站点。该网站本身正在进行改造，但它还没有完全准备好完成整个模块加载系统，因此目前，客户端将首先访问一个index.html（下面是模块加载组件，我将使用webpack进行传输）

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

我的策略是告诉webpack使用全局CSS作为入口点，并生成由全局CSS中所有@imported CSS组成的优化和捆绑CSS

---

我是否需要在该文件上单独运行postsss之类的程序？或者显式加载PostCs并在webpack配置中运行它（如果是这样的话，最好的方法是什么？）

现在，我使用PostCs网站上的JS API示例，以便将其用作在全局CSS中读取的基础，并将其传输到普通CSS以包含在首页中

(摘自)

---

现在，我正在使用PostCSS网站上的JSAPI示例，以便将其用作阅读全局CSS的基础，并将其向下转换为普通CSS以包含在首页中

(摘自)

---

这类似于这个问题：我将使用postss将CSS“编译”成正常的东西，而不是更少。我想我们都只是想利用webpack的环境，但不必绑定到.js入口点系统。这类似于这个问题：我将使用PostCSS将CSS“编译”成正常的东西，而不是更少。我想我们都只是想利用webpack的环境，但不必与.js入口点系统绑定。我拒绝接受我自己的答案，因为确实应该有一些感觉更正式的东西。我想我可以把它变成一个插件，或者可能已经有一个插件可以做到这一点。（有一个可以执行shell命令：）我拒绝接受我自己的答案，因为确实应该有一些感觉更正式的东西。我想我可以把它变成一个插件，或者可能已经有一个插件可以做到这一点。（有一个可以执行shell命令：）

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);
        });
});