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

【问题标题】：How to generate single css and multiple chunks of the same css in Webpack 4?如何在 Webpack 4 中生成单个 css 和多个相同 css 的块？
【发布时间】：2020-05-22 18:54:35
【问题描述】：

我想生成这样的 CSS：

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

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

还有一个文件

server.css

因为我在后端使用 server.css

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

【问题讨论】：

标签： webpack-4 mini-css-extract-plugin splitchunksplugin

【解决方案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')
    });
})

【讨论】：