webpack-4 - 如何在 Webpack 4 中生成单个 css 和相同 css 的多个块？

Question

我想生成这样的 CSS：

在我的 Web 应用程序使用的普通块中。

• main.css 1.chunk.css 2.chunk.css ....等

和一个文件

• 服务器.css

因为我在后端使用 server.css

我尝试使用此https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file但总是发出一个 css。

Answer 1

最后，我在 node 中使用脚本来合并 css，而不是更改 webpack 中的默认配置。并且还使用 npm-run-all 将脚本集成到 package.json 中的构建过程中

const fs = require('fs');

fs.readdir('build/static/css', function (err,files){
  if(err){
    console.log(err)
  }
  files
    .filter((file) => {
      return file.match(/.*\.css$/)
    })
    .sort((a, b) => {
      if (a.startsWith("main") || b.startsWith("main")) {
        return -1;
      } else {
        return a.localeCompare(b);
      }
    })
    .map(file => {
      const data = fs.readFileSync(`build/static/css/${file}`, 'utf8');
      fs.appendFileSync('build/static/css/server.css', data+'\n')
    });
})