나는 그것에 대해 모든 것을 배우고 싶은 웹팩 신인입니다. 내 웹팩을 실행할 때 충돌이 발생했습니다.
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)
