Closed
Description
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 commentedon Apr 30, 2018
You don't need multiple instances, please read #45
ezzatron commentedon May 1, 2018
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: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 grouptest
as a function, or the docs for whatenforce
is supposed to do.alexander-akait commentedon May 2, 2018
@ezzatron
test: function (...argf) => { console.log(args); }
and you can see all moduleslukepolo commentedon May 4, 2018
@ezzatron Yah #85 is why your js broke, if you include the extra emitted JS file it should work fine.
ezzatron commentedon May 7, 2018
@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: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 commentedon May 7, 2018
@ezzatron extract
theme/blue/main
andtheme/green/main
css to own bundleezzatron commentedon May 8, 2018
@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:
Which produces this directory structure when built:
ezzatron commentedon May 8, 2018
I also updated ezzatron/webpack-4-test-sass-themes with the working config.