将原生ES6应用集成到Laravel时遇Mix清单缺失及目录列表问题

核心问题分析 #

你当前遇到两个关键问题：

1. 运行npm run dev时显示目录列表而非加载应用
2. 访问/test路由时提示Mix manifest not found

根源在于Laravel Mix与自定义Webpack配置冲突，以及开发服务器启动逻辑错误，以下是分步修复方案：

步骤1：统一使用Laravel Mix构建，消除配置冲突 #

你同时维护webpack.mix.js和自定义webpack.config.babel.js，导致构建逻辑混乱。Laravel Mix已封装Webpack，建议基于Mix配置，删除多余的webpack.config.babel.js文件。

调整package.json的scripts配置

替换原有Webpack命令为Laravel Mix官方命令：

"scripts": {
    "lint": "eslint ./resources/js/app.js",
    "dev": "mix watch",
    "build": "mix build --production"
}

注：若Laravel版本较低，命令可能为npm run dev对应mix，npm run watch对应mix watch，可根据实际版本调整。

步骤2：配置Mix支持ES6转译 #

在webpack.mix.js中添加Babel配置，确保ES6代码被正确转译：

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    // 添加Babel转译配置
    .babelConfig({
        plugins: ['@babel/transform-runtime'],
        presets: ['@babel/preset-env']
    })
    .version();

若未安装Babel依赖，执行以下命令安装：

npm install --save-dev @babel/core @babel/preset-env @babel/transform-runtime babel-loader

步骤3：修复开发服务器启动逻辑 #

之前的npm run dev直接启动webpack-dev-server并指向resources/js目录，导致跳过Laravel路由系统。正确流程是：

1. 启动Laravel内置服务器：

   php artisan serve
   

2. 同时启动Mix资源监听器（实时编译ES6代码）：

   npm run dev
   

步骤4：验证资源引用与编译结果 #

保持test.blade.php的脚本引用不变：

<script src="{!! mix('js/app.js') !!}" type="module"></script>

运行npm run dev后，确认public目录下生成mix-manifest.json和编译后的js/app.js文件。

步骤5：恢复资源目录结构 #

将之前移到public目录的ES6文件移回resources/js，Laravel Mix的工作流是从resources目录编译资源到public目录，直接放置public会导致代码无法被转译。

验证流程 #

1. 执行npm install确保所有依赖安装完成
2. 执行npm run dev编译资源
3. 启动Laravel服务器php artisan serve
4. 访问http://127.0.0.1:8000/test，ES6应用即可正常运行

内容的提问来源于stack exchange，提问作者Hussein M Malkawi