Conflict multiple asset error

[unchai]

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.

[alexander-akait]

@unchai thanks for issue, look bug, feel free to send a PR 👍