Webpack4 cssが任意のファイル名でバンドルされない

Question

Webpackを学習中です。
cssを分離でバンドルしたく、MiniCssExtractPluginを使用しています。

srcの中に置いている2つのscssファイルをそれぞれcssファイルにコンパイルしてpublicフォルダに生成したいのですが、
pluginsのfilenameには[name]にしているにも関わらず、なぜかapp.scssの内容はなぜかindex.cssというファイル名で生成され、style.scssはコンパイルされません

src
┣━ app.scss
┗━ style.scss

webpack実行↓

public
┗━ index.scss (app.scssの内容)

webpack.config.jsはこちらになります。何か足りないのでしょうか。
まだ勉強中なので、htmlのプラグイン等入っていないのはご了承ください。
よろしくお願いします。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  mode: 'development',
  devtool: 'none',

  entry: {
    index: './src/index.js',
    sub:   ['./src/sub.js', './src/app.js']
  },

  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].js'
  },

  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        enforce: 'pre',
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /.(jpe?g|gif|png|svg|woff2?|ttf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images',
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ]

}

Answer 1

MiniCssExtractPluginという名前にも現れているように、WebpackでCSSを処理する場合、「JavaScriptからCSSを分離する」という考えで動いています。そのため、「index.jsから抽出したCSS」を単位としてindex.cssというファイルが作られます。

CSSも細かくファイルを切りたいなら、entryを適宜追加してください。

Comments

[ytail]

ご回答ありがとうございます。
早速、`entry`に追加してはみたのですが、エラーになってしまいます、
`Entry module not found: Error: Can't resolve '.src/app.scss' in 'webpackのパス'` (style.scssも同様)
この２つの方法で試してみました
```
entry: {
index: './src/index.js',
sub: ['./src/sub.js', './src/app.js'],
app: '.src/app.scss',
style: '.src/style.scss'
},
```

プラグインの方にも入れてみましたが、こちらだと `index.css`として出力されてしまいます。
```
plugins: [
new MiniCssExtractPlugin({
entry: {
app: '.src/app.scss',
style: '.src/style.scss'
},
filename: '[name].css',
}),
]
```

[maisumakun]

.srcになっているのは書き間違いですか？（./srcかと思います）

[ytail]

す、すみません。パスが間違っていました
./srcに直して実行してみると、エラーは出ず、scssのコンパイルもうまく行っていましたが、余計なjs/cssファイルがバンドルされてしまうようになってしまいました。
```
public
┣━app.css
┣━app.js
┣━index.css
┣━index.js
┣━style.css
┣━style.js
┗━sub.js

```

欲しいのは、これらなんです。
index.js
sub.js
app.css
style.css

なんどもすみません。

[maisumakun]

CSSとセットでJavaScriptが生成されてしまうのは本来仕方ないですが、プラグインで抑制することができます。

https://github.com/fqborges/webpack-fix-style-only-entries

[ytail]

ありがとうございます。
そちらのプラグイン導入で不要なjsファイルが出なくなりました。
前回のご回答から、entryにscss追加で複数cssファイルにバインドもできました。
なぜか一緒にindex.cssが出ていた件ですが、中身をよくみたら、
学習初期の頃にindex.jsにscssファイルをimportしていたせいでした。大変おさわがせしました。
全て解決できました。的確なアドバイス本当にありがとうございました。