Laravel Mix未用extract/动态导入却生成空CSS文件问题排查

问题到底出在哪？ #

你在routes.js里写的这个写法：

resolve => require(['../views/admin/dashboard/dashboard.vue'], resolve)

其实是Webpack默认会识别的动态导入语法——虽然它看起来是CommonJS的require，但这种带回调的异步写法，本质上和import()的作用完全一致，会触发Webpack的代码分割逻辑。

那为什么单个JS入口时没问题？
当你只编译admin.js时，Webpack的代码分割只会针对这一个入口，Laravel Mix的CSS提取逻辑能正常追踪到所有关联的样式文件；但当你同时编译app.js和admin.js两个入口时，Mix的多入口处理逻辑和Webpack的动态分割chunk发生了冲突：Mix会错误地把CSS提取任务和其中一个入口的分割chunk绑定，导致另一个入口对应的样式被完全忽略，最终输出0字节的空CSS文件。

两种可行的修复方案 #

方案1：把动态导入改成静态导入（推荐，如果你不需要懒加载） #

既然你现在不需要异步加载这个组件，直接换成静态导入就能彻底解决问题：

// 先在文件顶部静态导入组件
import Dashboard from '../views/admin/dashboard/dashboard.vue';

const routes = [
  {
    path: '/',
    component: Dashboard,
    meta: { title: "Dashboard" }
  },
];
export default routes

这种写法不会触发Webpack的代码分割，Mix的多入口编译逻辑就能正常处理所有CSS文件的提取。

方案2：显式配置Mix的代码分割与CSS提取（如果你需要保留动态导入） #

如果后续要做路由懒加载，必须保留动态导入，可以通过.extract()显式提取公共依赖，同时配置Vue样式提取，让Mix正确处理多入口的CSS：

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

mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
   .js('resources/assets/js/admin.js', 'public/js').sourceMaps()
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/admin.scss', 'public/css')
   // 提取公共依赖库，帮助Webpack理清多入口的资源关系
   .extract(['vue', 'vue-router'])
   // 显式开启Vue组件内样式的提取
   .options({
     extractVueStyles: true
   });

mix.copyDirectory('resources/assets/img', 'public/img');

另外提一句：Laravel Mix 5官方推荐使用Node 12+的LTS版本，你当前用的Node 11.x虽然能运行，但换成LTS版本可能还能避免一些隐性的兼容性问题。

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