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

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

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. .NET Core 파일로 포함 할 필요가 없습니다 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 런타임 청크와 함께 사용하면 장기 캐싱에 사용할 수 있으며 런타임 청크는 소스 코드에서 변경된 사항을 확인하고 해당 청크 해시를 업데이트합니다. 파일을 캐시 할 수 있도록 다른 파일을 업데이트하지 않습니다.

나는 똑같은 문제가 있었다. 문제가 file-loader. 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 파일을 자동으로 삽입합니다.

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

구성이 하나 이상의 "청크"를 생성하는 경우 (여러 진입 점 또는 CommonsChunkPlugin과 같은 플러그인을 사용하는 경우) 대체를 사용하여 각 파일이 고유 한 이름을 갖도록해야합니다.

• [name] 청크의 이름으로 대체됩니다.
• [hash] 컴파일의 해시로 대체됩니다.
• [chunkhash] 청크의 해시로 대체됩니다.

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

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

내 로컬 개발 환경에서이 오류가 발생했습니다. 나에게이 오류에 대한 해결책은 파일을 강제로 다시 빌드하는 것이 었습니다. 이를 위해 CSS 파일 중 하나를 약간 변경했습니다.

브라우저를 다시로드했는데 오류가 사라졌습니다.

Karma로 e2e를 수행 할 때 Vue.js 프로젝트에서 동일한 오류가 발생합니다. 페이지는 /dist/build.js 와 함께 정적 템플릿 index.html 을 사용하여 제공 되었습니다 . Karma를 실행하는 동안이 오류가 발생했습니다.

package.json 을 사용하여 Karma를 실행하는 명령 은 다음과 같습니다.

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

webpack.config.js 의 출력 구성 은 다음과 같습니다.

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

내 솔루션 : Evan Burbidge의 답변에서 영감을 얻어 webpack.config.js 끝에 다음을 추가했습니다 .

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

그리고 결국 페이지 서비스와 e2e 모두에서 작동했습니다.

이 문제를 해결하기 위해 index.html파일을 /public디렉토리에서 /src로 변경 했습니다. (웹팩 5.1.3)