Webpackで余分なファイルを作らずJSとCSSを別のディレクトリに出力したい

Question

Webpack 4 を使って SCSS と JS をコンパイルしようとしています。
スクリプトは JS フォルダに、スタイルシートは CSS フォルダにそれぞれ出力しようと思い、一応はできたのですが CSS フォルダに抽出後の意味のない JS ファイルが残ってしまうのが気になっています。

設定ファイルは次のようになっています。

module.exports = {
  entry: {
    "js/app": ["./src/js/app.js"],
    "css/app": ["./src/scss/app.scss"]
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),

出力されたファイルは
css/app.css
css/app.js
js/app.js
の３ファイルで、css/app.js はCSSファイルを抽出するだけに作られた使いみちのないものです。（中身は「// extracted by mini-css-extract-plugin」のようになっています）

調べた限りではoutputを同じ名前にして上書きされるようにするといいという情報があったのですが「Conflict: Multiple chunks emit assets to the same filename css/app.css」のように同じ名前がかぶっていると出力できませんでした。

どうにかして css/app.js のような余分なファイルを作ることなく JS と CSS ファイルをそれぞれのフォルダに出力したいのですがどのようにすればいいのでしょうか？

Answer 1

私も同じところでハマりました・・・

「Conflict: Multiple chunks emit assets to the same filename xxx.css」
が出ていて悩んでいたのですが、下記のような記述に変更したら上記のエラーが出なくなりました。

plugins: [
  new MiniCssExtractPlugin({
     filename: './[name].css', // ← ここに「./」を追加
  })
],

Comments

[nuages]

回答有り難うございます。エラー自体は教えていただいた記述で解消しました。しかし出来上がったapp.cssをみると中身がスクリプトになっているので、cssをjsで上書きしてしまっている状況のようです。jsをcssで上書きする順番にできたらいいのですが何か間違っているのでしょうか？

[-tomomo-]

すみません、エラーが消えたことに喜んでコメントしてしまいましたが帰宅後NGなことに気づきました。

いろいろ試した結果、どうしてもJSとCSSが一緒に出力されてしまうため、私の方は下記のURLを参考に「extract-text-webpack-plugin」を使用する方法にしました。
https://ics.media/entry/17376#text-extract-plugin

[-tomomo-]

余分なJSができてしまう件、issueが上がってました。
その中のコメント内にある「webpack-fix-style-only-entries」を入れたらCSSだけ残るようになりました。
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
https://github.com/fqborges/webpack-fix-style-only-entries