Webpack - Bundle multiple/different versions of .css files

Question

I would like to make my bundled .css file being generated by Webpack more configurable, so I can output different 'versions' - based on the same .css file - to make the life of developers working on my project in the future easier.

I would like to have the following steps:

1. Concat of all SCSS into CSS (bundle.css)
2. Minimize output of step 1 (bundle.min.css)
3. Embed all images from step 2 (bundle.b64.min.css)
4. Embed all fonts from step 3 (bundle.bs64.fonts.min.css)

In the end - after my build process -, I would have 4 distinct files in my dist folder. Would that me possible?

The way I'm currently doing it, I run a different script for each step - deletes dist folder, goes through project, produces the output. I would like to have a single script that does all of it at once without having to go through my project 4 times.

I kind of found a solution for it here:

Webpack Extract-Text-Plugin Output Multiple CSS Files (Both Minified and Not Minified)

But, for my specific case, I would have to return 4 different configurations in a array instead of a single object.

Answer 1

Ok so based on our comment conversation i'm gonna give you a workflow of steps 1-4, but with regular assets handling, not a bundling of assets (which i haven't heard of but maybe someone else can elaborate there).

So the steps:

1. bundle all scss files into 1 bundle.css
2. make sure this bundle is minified
3. add assets management to build for images
4. add assets management to build for fonts

The important things:

This workflow is basically a built by configuration. configuring the npm scripts with the package.json file, and configuring webpack with config.webpack.js. This will allow you to simply run 1 command to build your project: npm run build. note: For simplicity's sake i am going to ignore production/development/etc environments and focus on a single environment.

package.json:

This is used to set up the command that will actually run when you input npm run build in the terminal (from the project dir of course).

since we are avoiding different environments for now and as you are not using Typescript this is a very simple configuraton:

"scripts": {
    "build": "webpack",
  },

that's all you have to add. It sound's stupid now but when the project will get more complex you are going to like those scripts so better start off making them already.

webpack.config.js: The major lifting will be made in this configuration file. This basically tells webpack what to do when you run it (which is what npm run build is doing).

first off let's install some plugins:

• npm install --save-dev file-loader
• npm install --save-dev html-webpack-plugin
• npm install --save-dev mini-css-extract-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map'
  entry: './client/src/app.jsx',
  output: {
    path: path.join(__dirname, 'client/dist/public'),
    filename: 'bundle.[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: false
            }
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.json', '.jsx']
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './client/src/index_template.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'style.[hash].css',
      chunkFilename: '[id].[hash].css'
    }),
  ]
};

Notice i've added the htmlWebpackPlugin because it makes it easier to reference the correct hashed bundles automatically. Also I've assumed the app is a react app but you can just change the entry point to where your app loads from.

This is quite hard to do of the fly without testing things out, but i hope this gives you enough reference as to what you should change and do to get going with it.

Again i strognly recommend the webpack.js guides and documentation, they are very thorough and once you start getting the hang of it things start working smoothly.