충돌 : 여러 자산이 동일한 파일 이름으로 방출됩니다.

충돌 : 여러 자산이 동일한 파일 이름으로 방출됩니다.

---

나는 그것에 대해 모든 것을 배우고 싶은 웹팩 신인입니다. 내 웹팩을 실행할 때 충돌이 발생했습니다.

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

충돌을 피하려면 어떻게해야합니까?

이것은 내 webpack.config.js입니다.

module.exports = {
  context: __dirname + "/app",

  entry: {
    'javascript': "./js/app.js",
    'html': "./index.html",
  },
  output: {
    path: __dirname + "/dist",
    filename: "app.js",
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"]
      },
      {
        test: /\.html$/,
        loader: "file-loader?name=[name].[ext]",
      }
    ]
  }
};

---

나는 당신의 접근 방식에 익숙하지 않으므로 당신을 도울 수있는 일반적인 방법을 보여 드리겠습니다.

우선, 당신은에 output, 당신이 지정하는 filename에 app.js있는 출력이 계속 될 것이라고 나에게 의미가 있습니다 app.js. 동적으로 만들고 싶다면 "filename": "[name].js".

이 [name]부분은 파일 이름을 동적으로 만듭니다. 그것이 당신의 목적입니다 entry. 각 키는 [name].js.

둘째, html-webpack-plugin. 이를 test.

---

나는 같은 문제가 있었고 내 문제를 일으키는 정적 출력 파일 이름을 설정하고 있음을 발견했습니다. 출력 개체에서 다음 개체를 시도하십시오.

output:{
        filename: '[name].js',
        path: __dirname + '/build',
        chunkFilename: '[id].[chunkhash].js'
    },

이렇게하면 파일 이름이 다르고 충돌하지 않습니다.

편집 : 최근에 발견 한 한 가지는 HMR 재로드를 사용하는 경우 chunkhash 대신 해시를 사용해야한다는 것입니다. 나는 문제의 근원을 파헤 치지 않았지만 chunkhash를 사용하면 내 웹팩 구성이 깨 졌다는 것을 알고 있습니다.

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash:8].js',
  sourceMapFilename: '[name].[hash:8].map',
  chunkFilename: '[id].[hash:8].js'
};

HMR에서 잘 작동해야합니다. :)

2018 년 7 월 수정 :

이것에 대한 조금 더 많은 정보.

Hash 이것은 웹팩이 컴파일 될 때마다 생성되는 해시입니다. 개발 모드에서는 개발 중 캐시 버스 팅에 좋지만 파일의 장기 캐싱에는 사용해서는 안됩니다. 이렇게하면 프로젝트의 모든 빌드에서 해시를 덮어 씁니다.

Chunkhash 이것을 런타임 청크와 함께 사용하면 장기 캐싱에 사용할 수 있으며 런타임 청크는 소스 코드에서 변경된 사항을 확인하고 해당 청크 해시를 업데이트합니다. 파일을 캐시 할 수 있도록 다른 항목을 업데이트하지 않습니다.

---

나는 똑같은 문제가 있었다. 파일 로더에서 문제가 발생한 것 같습니다. html 테스트를 제거하고 대신 html-webpack-plugin을 포함하여 index.html 파일을 생성하면 오류가 사라졌습니다. 이것은 내 webpack.config.js파일입니다.

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = { 
  entry: {
    javascript: './app/index.js',
    },  

  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },  

  module: {
    rules: [
      {   
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, '/node_modules/')
        ],  
        loader: 'babel-loader'
      },  
    ]   
  },  

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },  

  plugins: [HTMLWebpackPluginConfig]
}

html-webpack-plugin은 index.html 파일을 생성하고 번들 된 js 파일을 자동으로 삽입합니다.

---

나는 같은 문제가 있었고 문서에서 이것을 발견했습니다.

If your configuration creates more than a single “chunk” (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name.

• [name] is replaced by the name of the chunk.
• [hash] is replaced by the hash of the compilation.
• [chunkhash] is replaced by the hash of the chunk.

 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}

---

I encountered this error in my local dev environment. For me, the solution to this error was to force the files to rebuild. To do this, I made a minor change to one of my CSS files.

I reloaded my browser and the error went away.

---

The same error in a Vue.js project when doing e2e with Karma. The page was served using a static template index.html with /dist/build.js. And got this error running Karma.

The command to issue Karma using package.json was:

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

The output configuration in webpack.config.js was:

 module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

My solution: inspired by the Evan Burbidge's answer I appended the following at the end of webpack.config.js:

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

And then it eventually worked for both page serving and e2e.

참고URL : https://stackoverflow.com/questions/42148632/conflict-multiple-assets-emit-to-the-same-filename