如何通过Webpack编译输出多个不同内容的JS文件？

完全可以实现。核心是修改Webpack配置中的entry项，从单入口改为多入口配置，配合output.filename的占位符来生成不同的输出文件。

具体步骤如下：

1. 修改webpack.common.js的entry配置
   将原来的单入口字符串改为对象形式，每个属性对应一个输出文件的chunk名称，属性值是对应入口ts文件的路径。示例：

   const path = require('path');
   
   module.exports = {
     entry: {
       main: './src/index.ts', // 原有的入口文件
       dashboard: './src/dashboard/index.ts', // 新增的入口1
       profile: './src/profile/index.ts' // 新增的入口2
     },
     // 其他基础配置（比如ts-loader、source-map等）
     output: {
       filename: '[name].bundle.js', // 使用[name]占位符，自动替换为entry中的属性名
       path: path.resolve(__dirname, 'dist'),
       clean: true // 每次编译清空dist目录
     },
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           use: 'ts-loader',
           exclude: /node_modules/
         }
       ]
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.js']
     }
   };
   

2. 确保各入口文件独立
   每个入口ts文件需包含自身完整的业务逻辑，Webpack会分别编译这些入口，输出内容不同的JS文件。比如dashboard/index.ts可以是后台面板的逻辑，profile/index.ts是用户个人中心的逻辑。

3. 自定义输出文件名（可选）
   如果需要更个性化的文件名，也可以调整output.filename的规则，比如：

   output: {
     filename: 'js/[name].[contenthash].js', // 加上目录和内容哈希，用于缓存优化
     path: path.resolve(__dirname, 'dist')
   }
   

   这样会在dist/js目录下生成如main.abc123.js、dashboard.def456.js这类带哈希的文件。

内容的提问来源于stack exchange，提问作者siggi_pop