Multiple entrypoints with one output file per entrypoint

[ezzatron]

Is this supported by MCEP? It was possible in ETP, because each loader was tied to an instance of the plugin:

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

const themeA = path.resolve(__dirname, 'src/theme-a.scss')
const themeB = path.resolve(__dirname, 'src/theme-b.scss')

const extractA = new ExtractTextPlugin({filename: 'theme-a.css'})
const extractB = new ExtractTextPlugin({filename: 'theme-b.css'})

module.exports = {
  entry: [themeA, themeB],
  module: {
    rules: [
      {
        test: themeA, 
        loader: extractA.extract({use: ['css-loader', 'sass-loader']}),
      },
      {
        test: themeB, 
        loader: extractB.extract({use: ['css-loader', 'sass-loader']}),
      },
    ],
  },
  plugins: [extractA, extractB]
}

But MCEP I'm not sure if it's possible to achieve the same thing, because there is only one loader (MiniCssExtractPlugin.loader), and so it cannot distinguish which inputs belong to which instance of MiniCssExtractPlugin.

[alexander-akait]

You don't need multiple instances, please read #45

[ezzatron]

Thanks for pointing me at that issue. I managed to get multiple themes extracted, but unfortunately it completely stops ALL the JavaScript in my main bundle from running. My React app basically becomes a blank page.

I also think I hit #85, because each theme is also outputting a useless .js file. I'm not sure if that's related to the whole app breaking, but I noticed this comment which sounds similar:

but then the SPA doesn't load and fails silently

I put together a GitHub repo to reproduce the problem over at ezzatron/webpack-4-test-sass-themes. If you run it as-is, you get the themes working, but no JavaScript runs. If you remove the cacheGroups configuration, you get JavaScript running, but the themes no longer work.

I have no idea what to try next. It would help if I knew where to look for the API docs for the module argument you get when providing a cache group test as a function, or the docs for what enforce is supposed to do.

[alexander-akait]

@ezzatron test: function (...argf) => { console.log(args); } and you can see all modules

[lukepolo]

@ezzatron Yah #85 is why your js broke, if you include the extra emitted JS file it should work fine.

[ezzatron]

@lukepolo Doesn't seem to be working for me.

I'm using HtmlWebpackPlugin which automatically adds all of the JS files. But since I'm trying to create two "themed" HTML files, I have this kind of setup:

  plugins: [
    new HtmlWebPackPlugin({
      filename: 'theme/blue/index.html',
      chunks: ['main', 'theme/blue/main'],
    }),
    new HtmlWebPackPlugin({
      filename: 'theme/green/index.html',
      chunks: ['main', 'theme/green/main'],
    }),
    new MiniCssExtractPlugin(),
  ],

With a setup like this, HtmlWebpackPlugin adds the green theme's JS automatically to the green HTML output, and the blue theme's JS automatically to the blue HTML output. As far as I can tell, all the JS is being included as expected.

Unless I need both of the theme's JS files in each HTML, and well, I don't event know how I can achieve that using HtmlWebpackPlugin without also bringing in both sets of CSS, which defeats the purpose.

[alexander-akait]

@ezzatron extract theme/blue/main and theme/green/main css to own bundle

[ezzatron]

@evilebottnawi Thank you, I managed to get it working using multiple bundles!

The only (minor) issue I have now is the useless JS file that is produced by each of the CSS-only bundles, but I assume that's more of a general problem with Webpack bundles, rather than something caused by MCEP specifically.

For anyone in a similar situation, this is the magic sauce I needed:

const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

const main = path.resolve(__dirname, 'src')
const themeBlue = path.resolve(__dirname, 'src/theme-blue.scss')
const themeGreen = path.resolve(__dirname, 'src/theme-green.scss')

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  plugins: [
    new HtmlWebPackPlugin({
      filename: 'theme/blue/index.html',
      chunks: ['main', 'theme/blue/main'],
    }),
    new HtmlWebPackPlugin({
      filename: 'theme/green/index.html',
      chunks: ['main', 'theme/green/main'],
    }),
    new MiniCssExtractPlugin(),
  ],
  entry: {
    main: main,
    'theme/blue/main': themeBlue,
    'theme/green/main': themeGreen,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        themeBlue: {
          test: themeBlue,
          name: 'theme/blue/main',
          chunks: 'all',
        },
        themeGreen: {
          test: themeGreen,
          name: 'theme/green/main',
          chunks: 'all',
        },
      },
    },
  },
}

Which produces this directory structure when built:

dist/
  theme/
    blue/
      index.html
      main.css
      main.js (useless)
    green/
      index.html
      main.css
      main.js (useless)
  main.js

[ezzatron]

I also updated ezzatron/webpack-4-test-sass-themes with the working config.