需为 laravel 文件管理器模块配置独立 webpack 构建：定义专属入口、启用 .version() 生成哈希路径并写入 manifest，显式复制第三方静态资源（如 pdf.js、图标字体），blade 中用 mix() 引用编译资源、asset() 引用未编译资源。
你需要在 Laravel 项目中为文件管理器模块编译独立的前端资源，避免与主应用 JS/CSS 混淆，同时确保哈希版本、正确路径映射和第三方静态资源（如图标字体、PDF 查看器）一并纳入构建流程。
配置独立入口与输出路径
打开 webpack.mix.js，在 const mix = require('laravel-mix'); 下方添加专属入口：
mix.js('resources/js/file-manager/app.js', 'public/js/file-manager').sass('resources/sass/file-manager/app.scss', 'public/css/file-manager');
这一步必须放在所有 .js() 或 .sass() 调用之前，否则 Mix 会把文件合并进默认的 app.js；【若已存在 mix.js('resources/js/app.js', ...) 且未加 .webpackConfig({ entry: {} })，新入口将被忽略】
启用版本控制并生成 manifest
在链式调用末尾追加 .version()：
mix.js('resources/js/file-manager/app.js', 'public/js/file-manager')
.sass('resources/sass/file-manager/app.scss', 'public/css/file-manager')
.version();
执行 npm run production 后，public/mix-manifest.json 中会出现类似 "\/js\/file-manager\/app.js": "\/js\/file-manager\/app.js?id=7a8b9c" 的条目。不加 .version() 就不会写入 manifest，mix() 辅助函数在生产环境将退化为原始路径，导致缓存失效失败。
复制第三方静态资源到 public 目录
文件管理器常依赖 PDF.js、iconfont、SVG sprite 等非编译资源，需显式复制：
方法一：复制单个字体文件
mix.copy('node_modules/@fontsource/inter/files/Inter-VariableFont_opsz,wght.ttf', 'public/fonts/inter-var.ttf');
方法二：批量复制整个目录（保留子结构）
mix.copyDirectory('node_modules/pdfjs-dist/build', 'public/js/pdfjs');
方法三：通配符匹配 SVG 图标
mix.copy('resources/svg/file-manager/**/*.svg', 'public/svg/file-manager');
注意：copy() 不触发 Webpack 编译，仅作文件搬运；若目标路径含子目录（如 public/svg/file-manager），该目录必须存在或提前创建，否则复制失败且无报错。
在 Blade 中安全引用编译后的资源
第一步：确认资源路径在 manifest 中可查
检查 public/mix-manifest.json 是否包含 "/js/file-manager/app.js" 对应的哈希键值对。
第二步：在视图中使用 mix() 函数{{ mix('js/file-manager/app.js') }} → 输出带哈希的完整 URL，例如 /js/file-manager/app.js?id=3f5e7a。
第三步：加载 CSS 必须同步引入{{ mix('css/file-manager/app.css') }} 需放在 内，且顺序在 JS 之前；否则 Vue 组件样式可能因 CSS 加载延迟而闪动。
第四步：第三方 JS 资源用绝对路径引用<script src="%7B%7B%20asset('js/pdfjs/pdf.js')%20%7D%7D"></script> —— 因为 pdfjs-dist 不经 Mix 编译，mix() 无法识别其路径，必须用 asset()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
