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

Я новичок в 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]",
      }
    ]
  }
};

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

Прежде всего, на ваш 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'
    },

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

РЕДАКТИРОВАТЬ: Одна вещь, которую я недавно обнаружил, заключается в том, что вы должны использовать хеш вместо 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 Если вы используете это в сочетании с фрагментом времени выполнения, вы можете использовать его для долгосрочного кэширования, фрагмент времени выполнения увидит, что изменилось в вашем исходном коде, и обновит хэши соответствующих фрагментов. Он не будет обновлять другие, позволяя кэшировать ваши файлы.

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

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

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

• [name] заменяется названием чанка.
• [hash] заменяется хешем компиляции.
• [chunkhash] заменяется хешем чанка.

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

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

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

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

Та же ошибка в проекте 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.

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