Skip to content

Multiple entrypoints with one output file per entrypoint #116

Closed
@ezzatron

Description

@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.

Activity

alexander-akait

alexander-akait commented on Apr 30, 2018

@alexander-akait
Member

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

ezzatron

ezzatron commented on May 1, 2018

@ezzatron
Author

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

alexander-akait commented on May 2, 2018

@alexander-akait
Member

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

lukepolo

lukepolo commented on May 4, 2018

@lukepolo

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

ezzatron

ezzatron commented on May 7, 2018

@ezzatron
Author

@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

alexander-akait commented on May 7, 2018

@alexander-akait
Member

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

ezzatron

ezzatron commented on May 8, 2018

@ezzatron
Author

@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

ezzatron commented on May 8, 2018

@ezzatron
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ezzatron@lukepolo@alexander-akait

        Issue actions

          Multiple entrypoints with one output file per entrypoint · Issue #116 · webpack-contrib/mini-css-extract-plugin