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 ファイルをそれぞれのフォルダに出力したいのですがどのようにすればいいのでしょうか？