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

Я новичок в webpack, который хочет узнать все об этом. Я столкнулся с конфликтом при запуске моего 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]",
      }
    ]
  }
};

Ответ 1

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

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

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

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

Ответ 2

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

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 года:

Немного больше информации об этом.

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

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

Ответ 3

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

Ответ 4

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

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

[name] заменяется именем куска.

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

[chunkhash] заменяется хешем куска.

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

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

Ответ 5

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

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

Ответ 6

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

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