如何用Laravel Mix编译CSS/JS及Laravel多页面按页编译方法

嘿，我来一步步帮你搞定Laravel Mix的这两个问题——基础的CSS/JS编译，还有多页面应用里按页面拆分编译的具体方案。

Laravel Mix本质是Webpack的封装，用起来比原生Webpack简单太多。先从最基础的配置说起：

1. 基础配置示例（webpack.mix.js） #

默认情况下，Laravel项目根目录的webpack.mix.js是配置入口，这里可以快速配置单文件或多文件的编译：

const mix = require('laravel-mix');

// 编译JS：将resources/js/app.js打包到public/js/app.js，自动处理ES6+转译、模块打包
mix.js('resources/js/app.js', 'public/js')
    // 编译CSS：如果用Sass，就用mix.sass；纯CSS用mix.postCss
    .sass('resources/sass/app.scss', 'public/css')
    // 开启版本号（缓存 Busting），避免浏览器缓存旧资源
    .version();

2. 常用编译命令 #

• npm run dev：快速编译资源（不压缩，适合开发环境）
• npm run watch：监听文件变化，自动重新编译（开发时常用）
• npm run prod：编译并压缩资源（生产环境用，体积更小）

针对你提到的页面1、页面2各自有独立JS/CSS的场景，我们可以通过自定义多入口配置来实现精准编译。

1. 先整理你的资源目录结构 #

推荐把不同页面的资源按页面分组，方便管理：

resources/
├─ js/
│  └─ pages/
│     ├─ page1/
│     │  ├─ test10.js
│     │  ├─ test11.js
│     │  └─ test12.js
│     └─ page2/
│        ├─ test21.js
│        ├─ test22.js
│        └─ test23.js
└─ css/
   └─ pages/
      ├─ page1/
      │  ├─ test10.css
      │  ├─ test11.css
      │  └─ test12.css
      └─ page2/
         ├─ test21.css
         ├─ test22.css
         └─ test23.css

2. 配置webpack.mix.js实现分页面编译 #

我们可以定义一个页面配置数组，然后循环处理每个页面的资源，这样后续新增页面只需修改数组即可，非常灵活。这里提供两种编译方式，按需选择：

方式一：将单个页面的所有JS/CSS合并成一个文件（减少HTTP请求）

const mix = require('laravel-mix');

// 定义页面配置：每个页面的名称、JS文件列表、CSS文件列表
const pages = [
    {
        name: 'page1',
        js: [
            'resources/js/pages/page1/test10.js',
            'resources/js/pages/page1/test11.js',
            'resources/js/pages/page1/test12.js'
        ],
        css: [
            'resources/css/pages/page1/test10.css',
            'resources/css/pages/page1/test11.css',
            'resources/css/pages/page1/test12.css'
        ]
    },
    {
        name: 'page2',
        js: [
            'resources/js/pages/page2/test21.js',
            'resources/js/pages/page2/test22.js',
            'resources/js/pages/page2/test23.js'
        ],
        css: [
            'resources/css/pages/page2/test21.css',
            'resources/css/pages/page2/test22.css',
            'resources/css/pages/page2/test23.css'
        ]
    }
];

// 循环处理每个页面
pages.forEach(page => {
    // 合并当前页面的所有JS到public/js/[页面名].js
    mix.js(page.js, `public/js/${page.name}.js`).version();
    
    // 合并当前页面的所有CSS到public/css/[页面名].css（用postCss处理纯CSS，需要的话可以加插件）
    mix.postCss(page.css, `public/css/${page.name}.css`, [
        require('autoprefixer') // 自动添加浏览器前缀，需要先npm install autoprefixer
    ]).version();
});

方式二：单独编译每个JS/CSS文件（保留文件独立性）

如果你的页面资源是完全独立的，不需要合并，可以用这种方式：

const mix = require('laravel-mix');

const pages = [
    {
        name: 'page1',
        js: [
            'resources/js/pages/page1/test10.js',
            'resources/js/pages/page1/test11.js',
            'resources/js/pages/page1/test12.js'
        ],
        css: [
            'resources/css/pages/page1/test10.css',
            'resources/css/pages/page1/test11.css',
            'resources/css/pages/page1/test12.css'
        ]
    },
    {
        name: 'page2',
        js: [
            'resources/js/pages/page2/test21.js',
            'resources/js/pages/page2/test22.js',
            'resources/js/pages/page2/test23.js'
        ],
        css: [
            'resources/css/pages/page2/test21.css',
            'resources/css/pages/page2/test22.css',
            'resources/css/pages/page2/test23.css'
        ]
    }
];

pages.forEach(page => {
    // 单独编译每个JS文件到public/js/[页面名]/[文件名].js
    page.js.forEach(jsFile => {
        const filename = jsFile.split('/').pop(); // 提取文件名，比如test10.js
        mix.js(jsFile, `public/js/${page.name}/${filename}`).version();
    });

    // 单独编译每个CSS文件到public/css/[页面名]/[文件名].css
    page.css.forEach(cssFile => {
        const filename = cssFile.split('/').pop();
        mix.postCss(cssFile, `public/css/${page.name}/${filename}`, [
            require('autoprefixer')
        ]).version();
    });
});

3. 在Laravel页面中引用编译后的资源 #

编译完成后，在对应的Blade模板里用Laravel的mix()函数引用资源（自动处理版本号）：

如果是合并方式：

<!-- 页面1的模板 -->
<link rel="stylesheet" href="{{ mix('css/page1.css') }}">
<script src="{{ mix('js/page1.js') }}"></script>

如果是单独编译方式：

<!-- 页面1的模板 -->
<link rel="stylesheet" href="{{ mix('css/page1/test10.css') }}">
<link rel="stylesheet" href="{{ mix('css/page1/test11.css') }}">
<script src="{{ mix('js/page1/test10.js') }}"></script>
<script src="{{ mix('js/page1/test11.js') }}"></script>

4. 额外提示 #

• 如果用Sass/SCSS代替纯CSS，把mix.postCss()换成mix.sass()即可，比如mix.sass('resources/sass/pages/page1/test10.scss', 'public/css/page1/test10.css')。
• mix.version()会生成mix-manifest.json文件，用来映射资源的版本号，确保用户每次打开页面都能加载最新资源。
• 开发时用npm run watch，它会自动监听文件变化并重新编译，不用手动反复执行命令。

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