Webpack转Vite：如何自动为多页面注入公共依赖？

}

由于Vite的入口不允许对象值为数组，我目前的Vite配置如下：
```js
const entries = {
  index: 'src/pages/index.html',
  login: 'src/pages/login.html',
  about: 'src/pages/about.html',
  contact: 'src/pages/contact.html'
}

这些HTML文件中包含指向对应ts文件的script标签，我将entries传入vite.config.js的rollupOptions.input：

export default defineConfig({
   build: {
     outDir: 'dist',
     rollupOptions: {
        input: entries
     }
   }
})

我对相关技术较陌生，且原Webpack配置十分复杂，请问如何无需手动操作，就能将@webcomponents/bundle、whatwg-fetch和core-js/stable注入到每个页面中？

解决方案 #

方法1：自定义插件自动注入依赖 #

先创建一个统一的依赖入口文件，把要注入的依赖都导进去：

// src/polyfills.js
import '@webcomponents/bundle';
import 'whatwg-fetch';
import 'core-js/stable';

然后在Vite配置里加一个自定义插件，自动给所有页面的ts文件头部加上这个依赖的导入：

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: entries
    }
  },
  plugins: [
    {
      name: 'auto-inject-polyfills',
      transform(code, id) {
        // 只处理pages目录下的ts文件
        if (id.includes('/src/pages/') && id.endsWith('.ts')) {
          return `import '../polyfills.js';\n${code}`;
        }
        return code;
      }
    }
  ],
  // 提前优化这些依赖，提升构建速度
  optimizeDeps: {
    include: ['@webcomponents/bundle', 'whatwg-fetch', 'core-js/stable']
  }
});

这样每个页面的ts文件在构建时都会自动导入polyfills.js，不用手动修改每个文件。

方法2：用HTML插件批量注入脚本 #

借助vite-plugin-html插件，直接在所有页面的HTML中自动注入这些依赖的script标签：
首先安装插件：

npm install vite-plugin-html --save-dev

然后修改Vite配置：

import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: entries
    }
  },
  plugins: [
    createHtmlPlugin({
      inject: {
        // 将依赖脚本注入到每个HTML的head标签里
        headScripts: [
          { src: '@webcomponents/bundle', type: 'module' },
          { src: 'whatwg-fetch', type: 'module' },
          { src: 'core-js/stable', type: 'module' }
        ]
      }
    })
  ]
});

Vite会自动处理这些依赖的路径，确保构建后能正确加载。

方法3：直接配置Rollup的数组入口 #

Rollup本身支持数组形式的入口，所以可以重新构建入口对象，把依赖和页面文件合并成数组：

// 先定义基础的页面入口
const pageEntries = {
  index: 'src/pages/index.ts',
  login: 'src/pages/login.ts',
  about: 'src/pages/about.ts',
  contact: 'src/pages/contact.ts'
};

// 给每个页面入口加上需要的依赖
const rollupInput = Object.fromEntries(
  Object.entries(pageEntries).map(([key, path]) => [
    key,
    ['@webcomponents/bundle', 'whatwg-fetch', 'core-js/stable', path]
  ])
);

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: rollupInput
    }
  }
});

这种方式不需要用HTML作为入口，直接用ts文件打包，Rollup会把依赖和页面代码合并到同一个chunk里。注意这种情况下需要自己处理页面的DOM挂载逻辑，因为没有HTML入口自动触发脚本执行。

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