進階條目

每個條目有多個檔案類型

在 entry 使用陣列值時，可以提供不同類型的檔案，以在不使用 JavaScript 中的 import 來處理樣式的應用程式（例如單一頁面應用程式或其他原因）中，為 CSS 和 JavaScript（以及其他）檔案製作個別的套件。

我們舉個例子。我們有一個 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

我們會在 production 模式中使用 MiniCssExtractPlugin 來處理 css，這是一種最佳實務。

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 目錄現在將包含四個檔案

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