How to generate single css and multiple chunks of the same css in Webpack 4?

Question

I want to generate CSS like this:

In normal chunks used by my web application.

• main.css 1.chunk.css 2.chunk.css .... etc

And a single file

• server.css

Because I use server.css in backend

I tried to use this https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file but always get one css emitted.

Answer 1

Finally I use a script in node to merge the css and not change the default configuration in webpack. And also use npm-run-all to integrate the script in build process in 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')
    });
})