Closed
Description
Hello~
How can I workaround conflict multiple asset error?
I'm using ETWP with webpack3, so I wanna upgrade to webpack4 with mini-css-extract-plugin.
Here is my example repository (https://github.com/unchai/mini-css-extract-plugin-issue-example).
Multi-entry overview
- entryA
- styleA.css
- styleB.css
- entryB
- styleA.css
- entryC
- (no css)
- entryD
- styleA.css
- styleB.css
ETWP example ("master" branch)
webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
...
const
module.exports = {
entry: {
entryA: "entryA.js",
entryB: "entryB.js",
entryC: "entryC.js",
entryD: "entryD.js",
},
...
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract("css-loader"),
}
]
},
plugins: [
new ExtractTextPlugin("[contenthash].css"),
]
};result
Hash: 9858a42e107f681c0e42
Version: webpack 3.12.0
Time: 755ms
Asset Size Chunks Chunk Names
entryD.js 3.29 kB 0 [emitted] entryD
entryA.js 3.26 kB 1 [emitted] entryA
entryB.js 2.95 kB 2 [emitted] entryB
entryC.js 2.48 kB 3 [emitted] entryC
04b62797ff71b6a50fe6e8d6156a8a29.css 52 bytes 0, 1 [emitted] entryD, entryA
bd24efc468e1671a38809c6a1afdf75a.css 26 bytes 2 [emitted] entryB
[0] ./src/styleA.css 41 bytes {0} {1} {2} [built]
[1] ./src/styleB.css 41 bytes {0} {1} [built]
[2] ./src/entryA.js 46 bytes {1} [built]
[3] ./src/entryB.js 23 bytes {2} [built]
[4] ./src/entryC.js 0 bytes {3} [built]
[5] ./src/entryD.js 46 bytes {0} [built]
+ 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!src/styleA.css:
[0] ./node_modules/css-loader!./src/styleA.css 188 bytes {0} [built]
+ 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!src/styleB.css:
[0] ./node_modules/css-loader!./src/styleB.css 188 bytes {0} [built]
+ 1 hidden module
change to mini-css-extract-plugin ("next" branch)
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
module.exports = {
mode: "development",
entry: {
entryA: "entryA.js",
entryB: "entryB.js",
entryC: "entryC.js",
entryD: "entryD.js",
},
...
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[contenthash].js",
}),
]
};result
Conflict error!!!
Hash: 72c510fda9068f2d0319
Version: webpack 4.12.1
Time: 640ms
Built at: 2018-06-26 17:29:46
Asset Size Chunks Chunk Names
8c802dd77bfe337cb66a.css 54 bytes entryA [emitted] entryA
entryA.js 5.03 KiB entryA [emitted] entryA
29ff5f07aa4c2e6d4a85.css 27 bytes entryB [emitted] entryB
entryB.js 4.45 KiB entryB [emitted] entryB
entryC.js 3.78 KiB entryC [emitted] entryC
[./src/entryA.js] 46 bytes {entryA} [built]
[./src/entryB.js] 23 bytes {entryB} [built]
[./src/entryC.js] 0 bytes {entryC} [built]
[./src/entryD.js] 46 bytes {entryD} [built]
[./src/styleA.css] 39 bytes {entryD} {entryB} {entryA} [built]
[./src/styleB.css] 39 bytes {entryD} {entryA} [built]
+ 2 hidden modules
ERROR in chunk entryD [entry]
8c802dd77bfe337cb66a.css
Conflict: Multiple assets emit to the same filename 8c802dd77bfe337cb66a.css
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/styleA.css:
[./node_modules/css-loader/index.js!./src/styleA.css] ./node_modules/css-loader!./src/styleA.css 188 bytes {mini-css-extract-plugin} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/styleB.css:
[./node_modules/css-loader/index.js!./src/styleB.css] ./node_modules/css-loader!./src/styleB.css 188 bytes {mini-css-extract-plugin} [built]
+ 1 hidden module
error Command failed with exit code 2.