如何解决Laravel+Vuexy项目执行npm run dev时webpack编译报错问题

报错原因 #

webpack 执行 require.context('./components', true, /\.vue$/i) 逻辑时，会在 main.js 所在的 resources/assets/js/ 目录下查找 components 文件夹，找不到对应路径就会抛出该错误。

解决方案 #

按以下顺序排查即可修复：

• 检查 resources/assets/js/ 目录下是否存在 components 文件夹
  • 若不存在：直接手动创建空的 components 文件夹即可，只要目录存在，即使暂时没有 .vue 文件也不会触发报错
  • 若存在：检查文件夹名称大小写，webpack 打包时对路径大小写严格校验，如实际文件夹名为首字母大写的 Components，将代码修改为 const files = require.context('./Components', true, /\.vue$/i) 即可
• 若你的 Vue 组件存放在其他路径（比如部分版本 Vuexy 模板的组件默认放在 resources/assets/js/core/components、resources/js/components 等目录），将 require.context 的第一个参数改为对应相对 main.js 的正确路径即可
• 临时规避方案：如果你暂时不需要批量自动注册全局 Vue 组件，可先注释掉该行及后续遍历 files 注册组件的代码，即可正常启动 npm run dev
• 若以上操作都无效，检查项目根目录下 webpack.mix.js 的 js 编译配置，确认入口路径配置正确，示例正确配置如下：

  mix.js('resources/assets/js/main.js', 'public/js')
    .vue()
  

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