面试题：Webpack入口与出口配置的基础优化

Question

在Webpack中，入口(entry)和出口(output)是基础配置。假设你有一个多页应用，需要配置多个入口文件，并且希望每个入口对应的输出文件能放在各自独立的目录下，同时输出文件名带上哈希值以实现缓存控制。请描述如何进行Webpack的入口与出口配置来满足这些需求，并给出相应的代码示例。

Answer 1

入口配置

在Webpack中配置多页应用的多个入口文件，可以使用对象形式的配置。假设项目中有两个页面page1和page2，其入口文件分别为src/page1/index.js和src/page2/index.js，配置如下：

module.exports = {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js'
  }
};

出口配置

为了使每个入口对应的输出文件放在各自独立的目录下，并且文件名带上哈希值，可以这样配置output：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]/[name].[contenthash].js'
  }
};

这里path指定了输出的根目录为dist，filename中的[name]代表入口的名称，这样每个入口文件就会输出到以入口名称命名的目录下，[contenthash]会根据文件内容生成哈希值，实现缓存控制。完整示例如下：

const path = require('path');

module.exports = {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]/[name].[contenthash].js'
  }
};