Webpack, html-webpack-plugin, Error: Child compilation failed

Question

["

I 've got a problem with my webpack configuration.<\/i>

Error: Child compilation failed:
  Conflict: Multiple assets emit to the same filename index.html:
  Error: Conflict: Multiple assets emit to the same filename index.html



 

 
 
 


  
 
  
  
  
compiler.js:76 [Pre-build]/[html-webpack-plugin]/lib/compiler.js:76:16

  
 
  
  
  
Compiler.js:291 Compiler. [Pre-build]/[webpack]/lib/Compiler.js:291:10

  
 
  
  
  
Compiler.js:494 [Pre-build]/[webpack]/lib/Compiler.js:494:13

  
 
  
  
  
Tapable.js:138 next [Pre-build]/[tapable]/lib/Tapable.js:138:11

  
 
  
  
  
CachePlugin.js:62 Compiler. [Pre-build]/[webpack]/lib/CachePlugin.js:62:5

  
 
  
  
  
Tapable.js:142 Compiler.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:142:13

  
 
  
  
  
Compiler.js:491 [Pre-build]/[webpack]/lib/Compiler.js:491:10

  
 
  
  
  
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

  
 
  
  
  
Compilation.js:645 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:645:19

  
 
  
  
  
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

  
 
  
  
  
Compilation.js:636 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:636:11

  
 
  
  
  
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

  
 
  
  
  
Compilation.js:631 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:631:10

  
 
  
  
  
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

  
 
  
  
  
Compilation.js:627 sealPart2 [Pre-build]/[webpack]/lib/Compilation.js:627:9

  
 
  
  
  
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

  
 
  
  
  
Compilation.js:575 Compilation.seal [Pre-build]/[webpack]/lib/Compilation.js:575:8

  
 
  
  
  
Compiler.js:488 [Pre-build]/[webpack]/lib/Compiler.js:488:16

  
 
  
  
  
Tapable.js:225 [Pre-build]/[tapable]/lib/Tapable.js:225:11

  
 
  
  
  
Compilation.js:477 _addModuleChain [Pre-build]/[webpack]/lib/Compilation.js:477:11

  
 
  
  
  
Compilation.js:448 processModuleDependencies.err [Pre-build]/[webpack]/lib/Compilation.js:448:13

  
 
  
  
  
next_tick.js:73 _combinedTickCallback internal/process/next_tick.js:73:7

  
 
  
  
  
next_tick.js:104 process._tickCallback internal/process/next_tick.js:104:9 
 

 
 
 

Answer 1

The problem is indeed the file-loader , because it simply copies the file over. By the time html-webpack-plugin tries to write index.html it has already been written by file-loader , hence resulting in a conflict.

There are several ways to resolve that issue, depending on what your needs are.

You could use html-loader for your HTML, although if you expect your imported HTML to simply be copied, it isn't the correct choice. To be clear, by the imported HTML I don't mean the template used by the html-webpack-plugin .

If you want to keep using the file-loader for your other HTML files, you can exclude the index.html so html-webpack-plugin falls back to its default loader. require.resolve works like require but gives you the full path of the module instead of its content.

{
    test: /\.html$/,
    exclude: [/node_modules/, require.resolve('./index.html')],
    use: {
        loader: 'file-loader',
        query: {
            name: '[name].[ext]'
        },
    },
},

When no loader matches the template, the html-webpack-plugin uses an ejs loader as a fallback . If you don't need any loader for .html files, you could remove the rule entirely and it would work just fine. That is rather unlikely, otherwise you wouldn't have a .html rule in the first place, but this also means you can use the .ejs extension to not apply the .html rule, as all HTML is valid EJS . You would rename index.html to index.ejs and change your plugin configuration accordingly:

new HtmlWebpackPlugin({
    template: 'index.ejs',
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
})

Answer 2

I had to upgrade my node version. then the issue is fixed.

upgrade to latest node version(ubuntu)

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo n latest

to check the version

node -v

you might need to restart your terminal to see the latest version.

Answer 3

我的问题的解决方案是更新节点版本。

Answer 4

就我而言，我的模板文件名拼写错误。

Answer 5

This is may be not ordinary case, but for me, problem was caused by symbol "!"in the path. After I moved all content to the folder without "!"then the error disappeared.

Answer 6

for my case, it's a little different

The Error Mseeage:

 ERROR  Failed to compile with 18 errors                                                                                                      6:32:32 ├F10: PM┤

These dependencies were not found:

* @/api/jsapiSignature in ./src/store/modules/scrmUser.js
* @/components/commonRefresh in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
* @/styles/index.scss in ./src/main.js
* @/theme/index.scss in ./src/main.js
* @/utils/auth in ./aicc-components/store/modules/user.js
* @/utils/constant in ./aicc-components/utils/enum.js
* @/views/announcement in ./src/router/index.js
* @/views/customerNew in ./src/router/index.js
* @/views/error in ./src/router/index.js
* @/views/friendCircle in ./src/router/index.js
* @/views/index in ./src/router/index.js
* @/views/redpack in ./src/router/index.js
* @/views/seatHelp in ./src/router/index.js
* @/views/selfOrder in ./src/router/index.js
* @/views/share in ./src/router/index.js
* @/views/temPublishpage in ./src/router/index.js
* @/views/uniqueQRCode in ./src/router/index.js
* @/views/unpack in ./src/router/index.js

To install them, you can run: npm install --save @/api/jsapiSignature @/components/commonRefresh @/styles/index.scss @/theme/index.scss @/utils/auth @/utils/constant @/views/announcement @/views/customerNew @/views/error @/views/friendCircle @/views/index @/views/redpack @/views/seatHelp @/views/selfOrder @/views/share @/views/temPublishpage @/views/uniqueQRCode @/views/unpack
Hash: 6ad0053d15291e2fddf4
Version: webpack 3.10.0
Time: 4127ms

vsCode prompt me that let me install these dependencies, but they are my private-local word. in one word,Moduke not found: Cant't resolve ... in ...

and the last information is:

Child html-webpack-plugin for "index.html":
     2 assets
       4 modules
webpack: Failed to compile.

my computer is MacBook Pro 14; and my environment is : nvm: 0.39.0 node: v12.22.7 npm: 6.14.15 yarn: 1.22.17

I had try so many way to slove this question, however nothing successful msg.

who know about this question, come on let us have a deeply talk

Answer 7

删除节点模块包然后运行 ​​npm install all package install 然后 npm start 面临同样的问题但是这个运行过程解决了问题所以这个解决方案很有用

Answer 8

I had the same issue few minutes ago and I switched to a stable version of node to solve it. It worked

sudo npm cache clean -f sudo npm install -gn sudo n stable

Answer 9

Simple Updated Node JS Version. And use

npm i

this will update your all libraries This method works for me you can also try