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

Я новачок веб-пакету, який хоче дізнатися все про це. Я зіткнувся з конфліктом під час запуску веб-пакета, який сказав мені:

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. Вам не потрібно включати це як a test.

У мене була та ж проблема, я виявив, що це встановлення статичного імені вихідного файлу, яке спричиняло мою проблему, у вихідному об'єкті спробуйте наступний об'єкт.

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

Це робить так, що імена файлів різні, і це не суперечить.

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

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

Тоді має нормально працювати з HMR :)

EDIT липень 2018:

Трохи більше інформації про це.

Хеш Це хеш, що генерується кожного разу, коли веб-пакет компілюється, у режимі розробника це добре для перебору кешу під час розробки, але не повинно використовуватися для довгострокового кешування ваших файлів. Це замінить хеш на кожній збірці вашого проекту.

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.

Команда для видачі 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щоб вирішити цю проблему. (Веб-пакет 5.1.3)