Конфликт: несколько ресурсов отправляются в одно и то же имя файла

87

Я новичок в Webpack, который хочет узнать об этом все. Я столкнулся с конфликтом при запуске своего веб-пакета, который сказал мне:

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]",
      }
    ]
  }
};

Андреасрейн
источник
5
что я хочу знать, так это то, какой инструмент выдает ошибку типа «Конфликт: несколько ресурсов отправляются в одно и то же имя файла slots.js». Почему бы вам не поместить в эту ошибку чертовы имена конфликтующих ресурсов вместо того, чтобы заставлять пользователя отслеживать ее ???
Майкл Джонстон
Хорошие новости! Ошибка обновлена. Теперь это полезно читатьConflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)
Cheeso

Ответы:

98

Я не совсем знаком с вашим подходом, поэтому я покажу вам общий способ помочь вам.

Прежде всего, на ваш output, вы указав filenameна app.jsчто имеет смысл для меня , что выход все равно будет app.js. Если вы хотите сделать его динамичным, просто используйте "filename": "[name].js".

Эта [name]часть сделает имя файла динамическим для вас. Это цель вашего entryобъекта. Каждый ключ будет использоваться как имя вместо расширения [name].js.

Во-вторых, вы можете использовать расширение html-webpack-plugin. Вам не нужно включать его как test.

ickyrr
источник
13
было бы здорово, если бы у этого был образец, который соответствовал бы оригиналу
Роберто Томас 09
26

У меня была такая же проблема, я обнаружил, что это установка статического имени выходного файла, которое вызывает мою проблему, в выходном объекте попробуйте следующий объект.

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

Это делает так, что имена файлов разные и не конфликтуют.

РЕДАКТИРОВАТЬ: Одна вещь, которую я недавно обнаружил, заключается в том, что вы должны использовать хеш вместо chunkhash при использовании перезагрузки HMR. Я не вникал в корень проблемы, но просто знаю, что использование chunkhash нарушает мою конфигурацию веб-пакета

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

Тогда должно работать нормально с HMR :)

ИЗМЕНИТЬ июль 2018 г .:

Еще немного информации об этом.

Хеш. Это хэш, который генерируется каждый раз при компиляции webpack. В режиме разработки он хорош для очистки кеша во время разработки, но не должен использоваться для длительного кеширования ваших файлов. Это перезапишет хэш при каждой сборке вашего проекта.

Chunkhash Если вы используете это в сочетании с фрагментом времени выполнения, вы можете использовать его для долгосрочного кэширования, фрагмент времени выполнения увидит, что изменилось в вашем исходном коде, и обновит хэши соответствующих фрагментов. Он не будет обновлять другие, позволяя кэшировать ваши файлы.

Эван Бербидж
источник
10

У меня была точно такая же проблема. Проблема, похоже, связана с расширением 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 генерирует файл index.html и автоматически вставляет в него связанный файл js.

Лукастильманн
источник
1
Это тоже решило мою проблему. Кажется, у вас может быть то HTMLWebpackPluginили html-loaderдругое, но не то и другое одновременно.
Рафаэль Рафатпанах
5

У меня была такая же проблема, и я нашел их в документах.

Если ваша конфигурация создает более одного «фрагмента» (как с несколькими точками входа или при использовании плагинов, таких как CommonsChunkPlugin), вы должны использовать замены, чтобы гарантировать, что каждый файл имеет уникальное имя.

  • [name] заменяется названием чанка.
  • [hash] заменяется хешем компиляции.
  • [chunkhash] заменяется хешем чанка.
 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}
hxin
источник
2

Я столкнулся с этой ошибкой в ​​своей локальной среде разработки. Для меня решением этой ошибки было принудительное восстановление файлов. Для этого я внес небольшие изменения в один из моих файлов CSS.

Я перезагрузил браузер, и ошибка исчезла.

MrGood
источник
Хотел использовать asyncComponent. Затем я обнаружил эту проблему с файлом, который раньше был в другом компоненте. Это исправлено простым перезапуском пряжи. Благодарность!
kidz
0

Та же ошибка в проекте Vue.js при выполнении e2e с Karma. Страница обслуживалась с использованием статического шаблона index.html с /dist/build.js . И получил эту ошибку при запуске Кармы.

Команда для выдачи Karma с использованием package.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'
  },
  ...
 }

Мое решение: вдохновленный ответом Эвана Бербиджа, я добавил следующее в конец webpack.config.js :

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

И затем это в конечном итоге сработало как для обслуживания страниц, так и для e2e.

Юрий Синицон
источник
0

Я изменил index.htmlфайл из /publicкаталога на, /srcчтобы исправить эту проблему. (Webpack 5.1.3)

Масих Джахангири
источник