面试题：Webpack多入口与多出口配置的基础理解

应用场景

多页应用（MPA）：
- 在多页应用中，每个页面都有独立的HTML文件和对应的JavaScript、CSS等资源。例如，一个电商网站可能有首页、商品列表页、商品详情页、购物车页等不同的页面。每个页面都有不同的业务逻辑和样式。使用Webpack多入口配置，可以为每个页面单独打包，提高代码的可维护性和加载性能。这样不同页面之间的代码不会相互干扰，并且在加载页面时，只需要加载当前页面所需的资源，减少不必要的加载。
代码拆分与复用：
- 对于大型项目，可能存在一些通用的模块或库，比如UI组件库、工具函数库等，这些模块可能被多个页面或功能模块复用。通过多入口配置，可以将这些通用模块单独打包成一个文件，然后在多个入口文件中引用。这样可以实现代码的共享和复用，避免重复打包，减少最终生成文件的体积。例如，多个业务模块都使用到了相同的弹窗组件库，就可以将该组件库单独打包，然后在各个业务模块的入口文件中按需引入。
多平台打包：
- 当项目需要同时支持多个平台，如Web端、移动端（包括不同分辨率和设备类型），可能需要针对不同平台构建不同的资源包。通过多入口和多出口配置，可以根据平台的特点分别打包对应的代码和资源。比如，Web端可能需要加载完整的功能和样式，而移动端可能为了适配不同屏幕大小和网络状况，需要精简的代码和优化的样式。通过配置不同的入口和出口，可以分别生成适合不同平台的构建结果。
微前端架构：
- 在微前端架构中，整个应用由多个独立的子应用组成。每个子应用可以有自己独立的构建配置，使用Webpack的多入口和多出口配置，可以为每个子应用单独打包，使得子应用之间的依赖和构建过程相互隔离。这样每个子应用可以独立开发、部署和维护，提高了开发的灵活性和效率。例如，一个大型企业应用可能由用户管理、订单管理、报表统计等多个微前端子应用组成，每个子应用都可以通过Webpack多入口和多出口配置进行单独构建。

多入口配置

基本配置：在Webpack配置文件（通常是webpack.config.js）中，entry属性可以是一个对象，每个键值对代表一个入口。例如：

module.exports = {
    entry: {
        page1: './src/page1.js',
        page2: './src/page2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 其他配置项...
};

这里page1和page2是入口的名称，'./src/page1.js'和'./src/page2.js'是对应的入口文件路径。[name]是Webpack的占位符，在输出文件名时会被替换为入口的名称，这样就会生成page1.js和page2.js两个文件。 2. 动态多入口配置：在实际项目中，可能入口文件的数量和路径不是固定的，这时可以通过Node.js的文件系统模块fs和路径处理模块path来动态生成入口配置。例如：

const path = require('path');
const fs = require('fs');

const entry = {};
const pagesDir = './src/pages';
fs.readdirSync(pagesDir).forEach((file) => {
    const filePath = path.join(pagesDir, file);
    if (fs.statSync(filePath).isFile() && path.extname(file) === '.js') {
        const name = path.basename(file, '.js');
        entry[name] = filePath;
    }
});

module.exports = {
    entry,
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 其他配置项...
};

这段代码会读取./src/pages目录下所有的JavaScript文件，并将它们作为入口，动态生成入口配置。

多出口配置

单页面应用（SPA）场景下的多出口：在单页面应用中，如果希望将一些特定的资源（如CSS、公共库等）分离出来单独输出，可以结合html-webpack-plugin等插件来实现多出口。例如，将CSS提取到单独的文件：

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
};

这里通过MiniCssExtractPlugin将CSS提取到dist/css/[name].css文件中，通过HtmlWebpackPlugin生成dist/index.html文件，实现了JavaScript和CSS分别输出到不同目录，达到多出口的效果。 2. 多页应用场景下的多出口：结合多入口配置，对于每个入口生成对应的HTML文件和相关资源。例如：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack-plugin');

module.exports = {
    entry: {
        page1: './src/page1.js',
        page2: './src/page2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/page1.html',
            filename: 'page1.html',
            chunks: ['page1']
        }),
        new HtmlWebpackPlugin({
            template: './src/page2.html',
            filename: 'page2.html',
            chunks: ['page2']
        })
    ]
};

这里为page1和page2两个入口分别生成了对应的page1.html和page2.html文件，并且每个HTML文件只引入对应的JavaScript chunk，实现了多入口多出口的配置，使得每个页面都有独立的资源输出。

星途面试题库

面试题：Webpack多入口与多出口配置的基础理解

知识考点

面试题答案

应用场景

多入口配置

多出口配置