高度なエントリ

エントリごとの複数のファイルタイプ

entryに値の配列を使用する場合、CSSファイルとJavaScriptファイル（およびその他）を個別のバンドルとして出力できます。これは、JavaScriptでスタイルを`import`していないアプリケーション（シングルページアプリケーション以前のアプリケーションやその他の理由）で役立ちます。

例を挙げましょう。ホームページとアカウントページの2種類のページを持つPHPアプリケーションがあるとします。ホームページは、アプリケーションの残りの部分（アカウントページ）とは異なるレイアウトと共有できないJavaScriptを使用しています。ホームページ用のアプリケーションファイルから`home.js`と`home.css`、アカウントページ用のアプリケーションファイルから`account.js`と`account.css`を出力したいとします。

home.js

console.log('home page type');

home.scss

// home page individual styles

account.js

console.log('account page type');

account.scss

// account page individual styles

ベストプラクティスとして、本番モードではCSSに`MiniCssExtractPlugin`を使用します。

webpack.config.js

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

module.exports = {
  mode: process.env.NODE_ENV,
  entry: {
    home: ['./home.js', './home.scss'],
    account: ['./account.js', './account.scss'],
  },
  output: {
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // fallback to style-loader in development
          process.env.NODE_ENV !== 'production'
            ? 'style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

上記の構成でwebpackを実行すると、異なる出力パスを指定していないため、`./dist`に出力が生成されます。`./dist`ディレクトリには、4つのファイルが含まれます。

• home.js
• home.css
• account.js
• account.css