Webpack, html-webpack-plugin, 오류 : 하위 컴파일 실패

Question

웹팩 구성에 문제가 있습니다. html-webpack-plugin을 구현 한 후 오류가 발생했습니다. index.html에서 발생한 전체 오류 스택이 있습니다.

오류 스택 : HTML을 웹팩 플러그인 : 내 웹팩 구성 코드

 
    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 
         
 

: 그 오류의 원인을 찾을 수 없습니다

var webpack = require('webpack'), 
    path = require('path'); 


var CopyWebpackPlugin = require('copy-webpack-plugin'), 
    ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 

const sourcePath = path.resolve(__dirname, './src'); 
const staticPath = path.resolve(__dirname, './static'); 

module.exports = function (env) { 

    const nodeEnv = env && env.prod ? 'production' : 'development'; 
    const isProd = nodeEnv === 'production'; 

    const postcssLoader = { 
     loader: 'postcss-loader', 
     options: { 
      plugins: function() { 
       return [ 
        require('autoprefixer') 
       ]; 
      } 
     } 
    } 

    const plugins = [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: Infinity, 
      filename: 'vendor.bundle.js' 
     }), 
     new webpack.EnvironmentPlugin({ 
      NODE_ENV: nodeEnv, 
     }), 
     new HtmlWebpackPlugin({ 
      template: 'index.html', 
      minify: { 
       removeComments: true, 
       collapseWhitespace: true, 
       removeAttributeQuotes: true 
      }, 
      chunksSortMode: 'dependency' 
     }) 
    ]; 

    if(isProd) { 
     plugins.push(
      new webpack.LoaderOptionsPlugin({ 
       minimize: true, 
       debug: false 
      }), 
      new webpack.optimize.UglifyJsPlugin({ 
       compress: { 
        warnings: false, 
        screw_ie8: true, 
        conditionals: true, 
        unused: true, 
        comparisons: true, 
        sequences: true, 
        dead_code: true, 
        evaluate: true, 
        if_return: true, 
        join_vars: true, 
       }, 
       output: { 
        comments: false, 
       }, 
      }) 
     ); 
    } else { 
     plugins.push(
      new webpack.HotModuleReplacementPlugin() 
     ); 
    } 

    return { 
     devtool: isProd? 'source-map' : 'eval', 
     context: sourcePath, 

     entry: { 
      app: './app/entry.ts', 
      vendor: './app/vendor.ts' 
     }, 

     output: { 
      path: staticPath, 
      filename: '[name].bundle.js', 
     }, 

     module: { 
      rules: [ 
       { 
        test: /\.html$/, 
        exclude: /node_modules/, 
        use: { 
         loader: 'file-loader', 
         query: { 
          name: '[name].[ext]' 
         }, 
        }, 
       }, 
       { 
        test: /\.css$/, 
        exclude: /node_modules/, 
        use: [ 
         'style-loader', 
         'css-loader', 
         'postcss-loader' 
        ] 
       }, 
       { 
        test: /\.scss$/, 
        exclude: /node_modules/, 
        use: [ 
         'style-loader', 
         'css-loader', 
         'postcss-loader', 
         'sass-loader' 
        ] 
       }, 
       { 
        test: /\.ts$/, 
        exclude: /node_modules/, 
        use: [ 
         'ts-loader' 
        ], 
       }, 
      ], 
     }, 

     resolve: { 
      alias: { 
       Public: path.resolve(__dirname,'src/public'), 
       Style: path.resolve(__dirname,'src/styles') 
      }, 
      extensions: ['.ts','.js', '.html'], 
      modules: [ 
       path.resolve(__dirname, 'node_modules'), 
       sourcePath 
      ] 
     }, 

     plugins, 

     performance: isProd && { 
      maxAssetSize: 100, 
      maxEntrypointSize: 300, 
      hints: 'warning' 
     }, 

     stats: { 
      colors: { 
       green: '\u001b[32m' 
      } 
     }, 

     devServer: { 
      contentBase: './src', 
      historyApiFallback: true, 
      port: 3000, 
      compress: isProd, 
      inline: !isProd, 
      hot: !isProd, 
      stats: { 
       assets: true, 
       children: false, 
       chunks: false, 
       hash: false, 
       modules: false, 
       publicPath: false, 
       timings: true, 
       version: false, 
       warnings: true, 
       color: { 
        green: '\u001b[32m' 
       } 
      }, 
     } 
    }; 
}; 

는, 어쩌면 내가 조금 피곤, 그러나 나는 그것을 끝내고 싶다. 그래서 나는 당신의 도움 사람을 바란다.

아마도 raw-loader을 사용하여 .html (?)을로드해야합니까? 그렇지 않아 행복하지 않습니다.

Answer 1

단순히 파일을 복사하기 때문에 문제는 실제로 file-loader입니다. html-webpack-plugin이 index.html으로 작성하려고하면 이미 file-loader에 의해 작성되어 충돌이 발생합니다.

필요에 따라이 문제를 해결할 수있는 방법은 여러 가지가 있습니다.

가져온 HTML을 복사하기 만하면 올바른 선택이 아니지만 html-loader을 HTML 용으로 사용할 수 있습니다. 명확하게 말하면, 가져온 HTML에서 나는 html-webpack-plugin이 사용하는 템플릿을 의미하지는 않습니다.

다른 HTML 파일에 계속 file-loader을 사용하려는 경우 index.html을 제외하면 html-webpack-plugin이 기본 로더로 돌아갈 수 있습니다. require.resolve은 require처럼 작동하지만 내용 대신 모듈의 전체 경로를 제공합니다. 어떤 로더가 템플릿과 일치하지 않을 때

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

는 html-webpack-plugin는 ejs loader as a fallback 사용합니다. .html 파일에 대한 로더가 필요없는 경우 규칙을 완전히 제거하면 정상적으로 작동합니다. 그럴 가능성은 낮습니다. 그렇지 않으면 처음에 .html 규칙이 없지만 .html 규칙을 적용하지 않으려면 .ejs 확장자를 사용하십시오. 모든 HTML은 EJS이므로 유효합니다. 당신은 index.ejs에 index.html의 이름을 변경하고 그에 따라 플러그인 구성을 변경합니다 :

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