충돌:여러 자산이 동일한 파일 이름으로 방출됨
저는 모든 것을 배우고 싶어하는 웹팩 초보자입니다.웹 팩을 실행할 때 다음과 같은 오류가 발생했습니다.
청크 html [entry] app.js 충돌에 오류가 발생했습니다.여러 자산이 동일한 파일 이름 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당신은 그것을 지정하고 있습니다.filenameapp.js그 결과는 여전히 유효할 것이라는 것이는 제게 말이 됩니다.app.js동적으로 만들려면 다음을 사용합니다."filename": "[name].js".
그[name].part는 파일 이름입니다.당신의 의 목적입니다.entry객관적으로각 키는 다음을 대체하는 이름으로 사용됩니다.[name].js.
그리고 두 번째로, 당신은 사용할 수 있습니다.html-webpack-plugin당신은 그것을 포함할 필요가 없습니다.test.
저도 같은 문제가 있었습니다. 제 문제의 원인이 되는 정적 출력 파일 이름을 설정하고 있다는 것을 발견했습니다. 출력 개체에서 다음 개체를 시도하십시오.
output:{
filename: '[name].js',
path: __dirname + '/build',
chunkFilename: '[id].[chunkhash].js'
},
이렇게 하면 파일 이름이 다르고 충돌하지 않습니다.
편집: 최근에 발견한 것 중 하나는 HMR 다시 로드를 사용할 경우 청크 해시 대신 해시를 사용해야 한다는 것입니다.문제의 근본을 파헤치지는 않았지만 청크 해시를 사용하는 것이 웹 팩 구성을 손상시킨다는 것을 알고 있습니다.
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash:8].js',
sourceMapFilename: '[name].[hash:8].map',
chunkFilename: '[id].[hash:8].js'
};
그럼 HMR로 잘 작동해야겠네요 :)
2018년 7월 편집:
이것에 대한 조금 더 많은 정보.
해시 이것은 웹 팩이 컴파일할 때마다 생성되는 해시이며, 개발 모드에서 이것은 개발 중 캐시 버스팅에는 좋지만 파일의 장기 캐싱에는 사용하면 안 됩니다.이렇게 하면 프로젝트의 모든 빌드에서 해시를 덮어씁니다.
청크해시 이를 런타임 청크와 함께 사용하면 장기 캐싱에 사용할 수 있습니다. 런타임 청크는 소스 코드에서 변경된 내용을 확인하고 해당 청크 해시를 업데이트합니다.파일을 캐시할 수 있도록 허용하는 다른 항목은 업데이트하지 않습니다.
저도 똑같은 문제를 겪었습니다.문제가 발생한 것 같습니다.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 파일을 자동으로 삽입합니다.
저는 웹팩 5로 업그레이드한 후에도 같은 문제가 있었습니다.제 문제는 복사 웹팩 플러그인 때문에 발생했습니다.
아래는 지정된 파일을 무시한 원본 패턴으로, 웹 팩 4에서는 작동하지만 웹 팩 5에서는 오류가 발생합니다.
충돌 오류:여러 자산이 동일한 파일 이름 default.hbs로 서로 다른 내용을 내보냅니다.
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["default.hbs"]
}
},
]
}),
],
오류 수정하기
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["**/default.hbs"]
}
},
]
}),
],
지정된 파일을 무시하지 않음으로써 default.hbs(a.k.a index.html)가 빌드(a.k.a /disk) 디렉터리에 두 번 복사되어 웹 팩이 여러 자산을 "동일한"(중복된) 파일 이름에 삽입하려고 했습니다.
저도 같은 문제가 있었고, 서류에서 이것들을 발견했습니다.
여러 진입점을 사용하거나 CommonSunkPlugin과 같은 플러그인을 사용하는 경우와 같이 구성에서 하나 이상의 "청크"를 생성하는 경우에는 대체를 사용하여 각 파일이 고유한 이름을 갖도록 해야 합니다.
[name]청크의 이름으로 대체됩니다.[hash]컴파일의 해시로 대체됩니다.[chunkhash]청크의 해시로 대체됩니다.
output: {
path:__dirname+'/dist/js',
//replace filename:'app.js'
filename:'[name].js'
}
제 경우 소스 맵 플러그인이 추출 미니 플러그인과 충돌했습니다.이에 대한 솔루션을 찾을 수 없습니다. CSS 및 Javascript 소스 맵이 동일한 파일에 쓰고 있습니다.프로젝트에서 최종적으로 해결한 방법은 다음과 같습니다.
new webpack.SourceMapDevToolPlugin({
filename: '[name].[ext].map'
}),
Angular에서 동일한 종류의 오류가 발생하는 경우
솔루션 : .angular 폴더 내의 캐시 폴더를 삭제하고 서버에서 포털을 다시 시작합니다.
로컬 개발 환경에서 이 오류가 발생했습니다.이 오류에 대한 해결책은 파일을 강제로 재구축하는 것이었습니다.이를 위해 CSS 파일 중 하나를 약간 변경했습니다.
브라우저를 다시 로드했더니 오류가 사라졌습니다.
약 2년 전에 만든 크롬 확장 버전에 대해 모든 종속성을 최신 버전(예: webpack 4 -> 5)으로 업데이트한 후 동일한 문제를 해결했습니다.
두 .popup.html그리고.options.html제입니다. 여기제원니다입본다니입▁)..webpack.config.js 파일:
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
target: 'web',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
entry: {
popup: './src/scripts/popup.tsx',
options: './src/scripts/options.tsx',
},
context: path.join(__dirname),
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.json', '.css'],
},
plugins: [
new CleanWebpackPlugin(),
new CopyPlugin([
{ from: 'src/popup.html', to: 'popup.html' },
{ from: 'src/options.html', to: 'options.html' },
{ from: 'src/manifest.json', to: 'manifest.json' },
{ from: 'src/icons', to: 'icons' },
]),
new HtmlWebpackPlugin({
template: path.join("src", "popup.html"),
filename: "popup.html",
chunks: ["popup"]
}),
new HtmlWebpackPlugin({
template: path.join("src", "options.html"),
filename: "options.html",
chunks: ["options"]
}),
]
};다음을 제거하여 해결했습니다.
{ from: 'src/popup.html', to: 'popup.html' },
{ from: 'src/options.html', to: 'options.html' },
new CopyPlugin...
지금 것 같습니다.popup.html그리고.options.html다음 시간에 폴더를 출력합니다.HtmlWebpackPlugin이미 방출하고 있습니다.
파일로더를 사용하는 위의 솔루션과 유사하지만, 저는 이 솔루션이 더 우아하다고 생각합니다.전에, 저는 단지 다음과 같은 것만 지정했습니다.[name]추가[path][name]아래와 같이 나의 갈등을 해결했습니다.
module: {
rules: [
{
test: /\.(mp4|m4s)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
나는 변했어요index.html에서 철하다./public로의 디렉토리./src이 문제를 해결하기 위해.(웹 팩 5.1.3)
카르마로 e2e를 수행할 때 Vue.js 프로젝트에서 동일한 오류가 발생합니다.이 페이지는 /dist/build.js와 함께 정적 템플릿 index.html을 사용하여 제공되었습니다.카르마를 실행하는 동안 오류가 발생했습니다.
패키지를 사용하여 카르마를 발급하는 명령입니다.json은 다음과 같습니다.
"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 모두에 효과가 있었습니다.
저는 웹팩 3을 웹팩 4로 업그레이드하는 과정에서 비슷한 문제가 있었습니다.모듈을 업그레이드한 후 이 오류가 발생했습니다.
충돌 시 경고:여러 자산이 동일한 파일 이름 alert-icon.svg에 서로 다른 콘텐츠를 내보냅니다.
충돌 시 경고:여러 자산이 동일한 파일 이름 comment.svg에 서로 다른 내용을 내보냅니다.
그 문제는 다음에 의해 야기되었습니다.fileloadersvg용.해시를 추가하여 오류 해결name: '[name].[hash:8].[ext]'웹 팩이 컴파일될 때마다 고유하게 만듭니다.
아래 코드 제공:
module: {
rules: [
{
test: /\.svg$/,
loader: 'file-loader',
query: {
name: '[name].[hash:8].[ext]'
}
]
}
웹팩 5 솔루션
아래와 같이 출력에 chunkFilename 및 assetModuleFilename을 추가합니다.
output: {
path: path.join(__dirname, "/build/"),
filename: "js/[name].[contenthash].js",
chunkFilename: 'chunks/[name].[chunkhash].js',
assetModuleFilename: 'media/[name][hash][ext][query]'
},
언급URL : https://stackoverflow.com/questions/42148632/conflict-multiple-assets-emit-to-the-same-filename
'sourcecode' 카테고리의 다른 글
| 빠르게 원을 그리며 이미지를 설정하는 방법 (0) | 2023.08.06 |
|---|---|
| Python 시간대 변환 (0) | 2023.08.06 |
| AJAX에서 GET vs POST? (0) | 2023.08.01 |
| 라라벨 웅변가 관계 가져오기 카운트 (0) | 2023.08.01 |
| Dutrin NativeQuery를 사용하여 단일 행 결과 가져오기 (0) | 2023.08.01 |