I’ve been toiling with this for a while, and even with the broadly unintelligible structure of webpack, I can’t find any guidance on how this is supposed to work.
Context:
I have multiple JS files and multiple CSS files. I want to combine them for production deployment. I’ve been using webpack for a while successfully with just JS, but trying to add CSS yields an error:
Error: Conflict: Multiple chunks emit assets to the same filename app.js (chunks src and css)
at /<redacted>/node_modules/webpack/lib/Compilation.js:4617:12
at /<redacted>/node_modules/webpack/lib/Cache.js:91:34
at Array.<anonymous> (/<redacted>/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
at /<redacted>/node_modules/webpack/lib/Cache.js:91:19
at Hook.eval [as callAsync] (eval at create (/<redacted>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
at Cache.get (/<redacted>/node_modules/webpack/lib/Cache.js:75:18)
at ItemCacheFacade.get (/<redacted>/node_modules/webpack/lib/CacheFacade.js:111:15)
at /<redacted>/node_modules/webpack/lib/Compilation.js:4563:22
at arrayEach (/<redacted>/node_modules/neo-async/async.js:2405:9)
at Object.each (/<redacted>/node_modules/neo-async/async.js:2846:9)
My webpack.config.js
file looks like this:
import path from 'path';
import {fileURLToPath} from 'url';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
// __dirname doesn't work with ES6 modules :/
// https://bobbyhadz.com/blog/javascript-dirname-is-not-defined-in-es-module-scope
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
entry: {
src: './src/index.js',
css: [
path.resolve(__dirname, './css/styles.css'),
path.resolve(__dirname, './css/properties.css'),
]
},
devtool: "source-map",
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'app.js',
library: "app"
},
module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
],
},
],
},
plugins: [new MiniCssExtractPlugin({
filename: 'app.css',
})]
};
My goal is to have multiple css files and multiple js files merged (and minified) into a single JS (app.js
) and a single CSS file (app.css
).
Has anyone been able to get this working?
Environment
From package.json
"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.7.3",
"source-map-loader": "^4.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^5.0.1"
Node version:
node --version
v14.17.1