web-dev-qa-db-ja.com

競合：複数のアセットが同じファイル名に出力する

私はそれについてすべてを学びたいと思う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]",
      }
    ]
  }
};
javascriptnode.jswebpackconfigconflict
57
Andreasrein

私はあなたのアプローチにあまり詳しくないので、あなたを助ける一般的な方法を紹介します。

まず、outputで、filenameをapp.jsに指定しています。これは、出力が引き続きapp.jsであることを意味します。動的にしたい場合は、"filename": "[name].js"を使用してください。

[name]部分は、ファイル名を動的にします。それがオブジェクトとしてのentryの目的です。各キーは、[name].jsの代わりに名前として使用されます。

次に、html-webpack-pluginを使用できます。 testとして含める必要はありません。

69
ickyrr

私は同じ問題を抱えていましたが、問題を引き起こしている静的出力ファイル名を設定していることがわかりました。出力オブジェクトで次のオブジェクトを試してください。

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

これにより、ファイル名が異なり、衝突しなくなります。

編集：私が最近見つけた1つのことは、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で問題なく動作するはずです:)

2018年7月編集：

これに関するもう少しの情報。

Hashこれは、webpackがコンパイルされるたびに生成されるハッシュです。開発モードでは、開発中のキャッシュの無効化に適していますが、ファイルの長期キャッシュには使用しないでください。これにより、プロジェクトのすべてのビルドでハッシュが上書きされます。

Chunkhashこれをランタイムチャンクと組み合わせて使用​​すると、長期キャッシュに使用できます。ランタイムチャンクはソースコードの変更を確認し、対応するチャンクハッシュを更新します。他のファイルは更新されず、ファイルがキャッシュされます。

17
Evan Burbidge

私はまったく同じ問題を抱えていました。問題はファイルローダーで発生するようです。 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ファイルを自動的に挿入します。

9
lukastillmann

私は同じ問題を抱えていました、そして、私はこれらを文書で見つけました。

構成が複数の「チャンク」を作成する場合（複数のエントリポイントやCommonsChunkPluginなどのプラグインを使用する場合）、置換を使用して各ファイルに一意の名前を付ける必要があります。

  • [name]はチャンクの名前に置き換えられます。
  • [hash]は、コンパイルのハッシュに置き換えられます。
  • [chunkhash]は、チャンクのハッシュに置き換えられます。
 output: {
    path:__dirname+'/dist/js',

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

ローカルの開発環境でこのエラーが発生しました。私にとって、このエラーの解決策は、ファイルを強制的に再構築することでした。これを行うために、CSSファイルの1つに小さな変更を加えました。

ブラウザをリロードすると、エラーはなくなりました。

1
MrGood

Karmaでe2eを実行するときのVue.jsプロジェクトでの同じエラー。ページは、静的テンプレートindex.html with / dist/build.jsを使用して提供されました。 Karmaの実行中にこのエラーが発生しました。

package.jsonを使用してKarmaを発行するコマンドは次のとおりです。

"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の両方で機能しました。

0
Juri Sinitson