Laravel Mix v5开发构建移除__webpack_require__的源路径注释

问题根源 #

npm run dev属于开发构建，Laravel Mix 5对应Webpack 4版本，Webpack默认会在__webpack_require__调用旁生成包含本地绝对路径的注释。这类注释和代码压缩工具（Terser/Uglify）无关——开发构建不会启用压缩，所以你之前尝试的压缩相关配置均无效。

解决方案 #

在项目根目录的webpack.mix.js中添加自定义Webpack配置，将模块注释中的绝对路径替换为相对项目根目录的路径：

const path = require('path');

// 保留原有的Mix编译配置
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

// 新增配置：替换绝对路径注释为相对路径
mix.webpackConfig({
  output: {
    // 处理dev模式下模块注释的路径模板
    devtoolModuleFilenameTemplate: info => {
      // 计算模块文件相对于项目根的路径
      const relativePath = path.relative(__dirname, info.absoluteResourcePath);
      return `webpack:///${relativePath}`;
    },
    // 处理 fallback 场景的路径模板
    devtoolFallbackModuleFilenameTemplate: info => {
      const relativePath = path.relative(__dirname, info.absoluteResourcePath);
      return `webpack:///${relativePath}?${info.hash}`;
    }
  },
  // 强制使用命名模块标识符，确保注释路径基于相对路径生成
  optimization: {
    moduleIds: 'named'
  }
});

验证效果 #

执行npm run dev后，查看输出的JS文件，__webpack_require__的注释会变为类似/*! webpack:///resources/js/xxx.js */的格式，不再包含本地绝对路径。不同机器构建的结果将完全一致，避免CI/CD流水线因路径差异误判代码变更。

为什么之前的尝试无效 #

• 压缩工具配置无效：开发构建（dev模式）默认不启用Terser/Uglify，所以压缩相关的注释移除配置不会生效。
• resourceRoot配置无关：该配置仅影响图片、字体等资源的加载路径，和模块注释中的文件路径逻辑无关。
• 手动引入TerserPlugin触发生产构建：Terser是生产构建的默认插件，手动引入会强制切换到生产模式，破坏开发构建的内容结构。

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