electron-userland / electron-userland/electron-webpack
Name conflict for styles.css chunks when using multiple windows
- 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.