如何在Laravel中使用Vite实现CSS与JS文件自动压缩

1. 配置 Vite 入口与输出规则 #

在项目根目录的vite.config.js中，修改配置以匹配需求：指定多文件入口、输出到public下的对应目录，并开启自动压缩。

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

export default defineConfig({
    plugins: [
        laravel({
            // 配置所有需要处理的JS和CSS入口文件
            input: [
                'resources/js/page1.js',
                'resources/js/page2.js',
                'resources/css/page1.css',
                'resources/css/page2.css'
                // 按需添加更多文件
            ],
            refresh: true,
        }),
    ],
    build: {
        minify: 'esbuild', // 默认开启高效压缩，无需额外配置
        outDir: 'public', // 输出根目录指向项目public文件夹
        rollupOptions: {
            output: {
                // 自定义输出文件命名规则：保留原文件名+min后缀
                entryFileNames: 'js/[name].min.js',
                chunkFileNames: 'js/[name].min.js',
                assetFileNames: ({name}) => {
                    // 区分CSS资源，输出到css目录
                    if (/\.css$/.test(name ?? '')) {
                        return 'css/[name].min.css';
                    }
                    return 'assets/[name].[hash][extname]';
                },
            },
        },
    },
});

2. 配置自动监听构建脚本 #

在项目根目录的package.json中，新增监听脚本，让Vite在文件变更时自动重新构建：

{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    }
}

3. 启动自动更新服务 #

运行以下命令启动监听模式：

npm run watch

现在，当你修改resources/js或resources/css下的文件时，Vite会自动压缩并输出对应的filename.min.js到public/js，filename.min.css到public/css目录。

注意事项 #

• 所有需要处理的文件必须在vite.config.js的input数组中配置，否则Vite不会监听和处理。
• 新增页面的JS/CSS时，直接在input数组中追加路径即可。
• esbuild是Vite默认的压缩工具，性能优于传统工具；若需定制压缩规则，可调整minify相关参数。

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