Webpack entry 高級(jí)用法

每個(gè)入口使用多種文件類型

在不使用 ?import? 樣式文件的應(yīng)用程序中（預(yù)單頁應(yīng)用程序或其他原因），使用一個(gè)值數(shù)組結(jié)構(gòu)的 entry，并且在其中傳入不同類型的文件，可以實(shí)現(xiàn)將 CSS 和 JavaScript（和其他）文件分離在不同的 bundle。

舉個(gè)例子。我們有一個(gè)具有兩種頁面類型的 PHP 應(yīng)用程序：home(首頁) 和 account(帳戶)。home 與應(yīng)用程序其余部分（account 頁面）具有不同的布局和不可共享的 JavaScript。我們想要從應(yīng)用程序文件中輸出 home 頁面的 ?home.js? 和 ?home.css?，為 account 頁面輸出 ?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(生產(chǎn)) 模式中使用 ?MiniCssExtractPlugin? 作為 CSS 的一個(gè)最佳實(shí)踐。

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',
    }),
  ],
};

由于我們未指定其他輸出路徑，因此使用以上配置運(yùn)行 webpack 將輸出到 ?./dist?。?./dist? 目錄下現(xiàn)在包含四個(gè)文件：

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