Laravel 9.19 + Vite实现多页面独立JS打包方案咨询

完全可以用Vite替代Gulp实现你的需求，通过配置多入口打包，为每个页面生成独立的JS文件，具体步骤如下：

1. 修改Vite配置文件 #

编辑项目根目录的vite.config.js，配置多入口对应你的页面JS集合，同时指定输出规则匹配你之前的Gulp配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // 配置多入口，键名对应最终输出的文件名
            input: {
                homepage: [
                    'resources/js/lib/jquery.min.js',
                    'resources/js/lib/bootstrap.bundle.min.js',
                    'resources/js/lib/blazy.min.js',
                    'resources/js/lib/swiper.min.js',
                    'resources/js/lib/fontawesome.min.js',
                    'resources/js/lib/wow-animate.min.js',
                    'resources/js/common.js',
                    'resources/js/homepage.js',
                ],
                shop: [
                    'resources/js/lib/jquery.min.js',
                    'resources/js/lib/bootstrap.bundle.min.js',
                    'resources/js/lib/blazy.min.js',
                    'resources/js/lib/fontawesome.min.js',
                    'resources/js/lib/wow-animate.min.js',
                    'resources/js/common.js',
                    'resources/js/parts/accordion.js',
                    'resources/js/shop.js',
                ]
            },
            publicDirectory: 'public',
            build: {
                // 指定输出目录到public/js
                outDir: 'public/js',
                rollupOptions: {
                    // 禁用自动代码分割，确保每个入口打包为单一文件（和Gulp行为一致）
                    manualChunks: () => undefined,
                    output: {
                        // 输出文件名与入口键名完全一致
                        entryFileNames: '[name].js',
                        chunkFileNames: '[name].js',
                        assetFileNames: '[name].[ext]'
                    }
                }
            }
        }),
    ],
});

2. 在页面模板中引入对应JS #

在各自页面的Blade模板中，使用Laravel的@vite指令引入对应入口的打包文件：

{{-- 首页模板 --}}
@vite('homepage')

{{-- 商城页面模板 --}}
@vite('shop')

3. 执行打包命令 #

• 开发环境实时编译：运行 npm run dev
• 生产环境构建打包：运行 npm run build

执行后，Vite会在public/js目录下生成homepage.js和shop.js两个独立文件，完全匹配你之前用Gulp实现的效果。

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