高级入口

webpackjsorg-main指南-教程

高级入口

每个入口的多种文件类型

当为 entry 使用数组值来提供不同类型的文件时，可以为那些不在 JavaScript 中通过 import 引入样式的应用程序（单页应用之前或出于其他原因）分别生成 CSS 和 JavaScript（及其他）文件的独立 bundle。

让我们来看一个例子。我们有一个 PHP 应用程序，包含两种页面类型：home 和 account。home 页面与应用程序的其余部分（account 页面）有不同的布局和不可共享的 JavaScript。我们希望从应用程序文件中为 home 页面输出 home.js 和 home.css，为 account 页面输出 account.js 和 account.css。

home.js

js 复制代码

console.log("home page type");

home.scss

scss 复制代码

// home page individual styles

account.js

js 复制代码

console.log("account page type");

account.scss

scss 复制代码

// account page individual styles

作为最佳实践，我们将在 production 模式下使用 MiniCssExtractPlugin 来处理 CSS。

webpack.config.js

js 复制代码

import MiniCssExtractPlugin from "mini-css-extract-plugin";

export default {
  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

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。