electron-userland / electron-userland/electron-webpack

Name conflict for styles.css chunks when using multiple windows

Open
#145 4 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
902
Forks
168
PR merge metrics
No merged PRs in 30d

Description

Feature Request: Allow different entries to build differently-named css chunks.

I'm implementing windows by creating a separate entry point for each window (see webpack config below). One downside to doing this is that currently electron-webpack generates all styles chunks with the same (unconfigurable) name. This results in an error when trying to build:
```
ERROR in chunk login [entry]
styles.css
Conflict: Multiple assets emit to the same filename styles.css

ERROR in chunk mainWindow [entry]
styles.css
Conflict: Multiple assets emit to the same filename styles.css
```

The way we've fixed it in our fork is to simply change the default name from 'styles.css' to '[name]-styles.css', but I'm unsure if there's desire to make it more configurable than that.

It's worth noting that you can't just override it in a custom webpack file, as (afaik) there's no way to "remove" an already added plugin, and the naming (and thus conflict) happens when the RenderTarget adds a new MiniCssExtractPlugin.

If this is a change you're interested in, I'm happy to supply the PR (either as-is or with a more configurable name).

renderer.webpack.config.js:
```
const HtmlWebpackPlugin = require('html-webpack-plugin');

// https://github.com/electron-userland/electron-webpack/issues/125
const presetEnv = require('@babel/preset-env/lib/index.js');
delete presetEnv.default;
delete presetEnv.isPluginRequired;
delete presetEnv.transformIncludesAndExcludes;

var buildEntryPoint = function(entryPoint) {
if (process.env.NODE_ENV === 'production') {
return entryPoint
} else {
return [
'webpack-dev-server/client?http://localhost:9080',
'webpack/hot/only-dev-server',
entryPoint
]
}
};

module.exports = {
entry: {
mainWindow: buildEntryPoint('./src/renderer/containers/MainWindow/Window.ts'),
import: buildEntryPoint('./src/renderer/containers/ImportWizard/Window.ts'),
login: buildEntryPoint('./src/renderer/containers/LoginWindow/Window.ts')
},
plugins: [
new HtmlWebpackPlugin({
filename: 'MainWindow.html',
chunks: ['mainWindow'],
template: './src/renderer/containers/MainWindow/Window.html'
}),
new HtmlWebpackPlugin({
filename: 'ImportWizard.html',
chunks: ['import'],
template: './src/renderer/containers/ImportWizard/Window.html'
}),
new HtmlWebpackPlugin({
filename: 'LoginWindow.html',
chunks: ['login'],
template: './src/renderer/containers/LoginWindow/Window.html'
})
]
};

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.