一次理清多入口 Webpack 和 Vite 配置方法

1、webpack配置多入口方法：

• 入口
• 出口
• 配置HTML模板：为每个页面创建一个HTML模板，并使用插件将生成的脚本文件自动注入到HTML中。可以使用html-webpack-plugin插件来实现这一点

  // webpack.config.js
  const path = require('path');
   
  module.exports = {
    // 入口 多入口对象方式
    entry: {
      main: './src/main.js',
      admin: './src/admin.js'
    },
    // 出口 name 作为占位符
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
    // ...
    plugins: [
      // 多入口 - 生成 index.html
      new HtmlWebpackPlugin({
        template: path.join(srcPath, 'index.html'),
        filename: 'index.html',
        // chunks 表示该页面引用哪些 chunk （即上面的 index 和 other）
        // 如果不写 chunks , 会把入口的两个 chunk - index 和 other 都引入
        chunks: ['index'] // 只引用 index.js
      }),
   
      // 多入口 - 生成 other.html
      new HtmlWebpackPlugin({
        template: path.join(srcPath, 'other.html'),
        filename: 'other.html',
        chunks: ['other']
      })
    ]
    // 其他配置...
  };
  

  2、vite 配置多入口方法

  这个配置会生成两个bundle，一个是main.js，另一个是sub.js。你可以在input对象中添加任意多的入口，每个属性名将作为输出文件的名称，而属性值则是对应的入口文件路径。

  !!! 记得确保你的入口文件（main.js 和 sub.js）存在于你的项目的相应路径中。

  // vite.config.js
  import { defineConfig } from'vite';
  exportdefaultdefineConfig({
    build: {
      rollupOptions: {
        input: {
          main: 'src/main.js', // 主入口
          sub: 'src/sub.js'// 子入口
        }  
      } 
    }
  });
  

  旨在分享~~~~~~~~~~~~~~~~~~~