Laravel Blade栈中Webpack打包JS函数调用提示未定义问题咨询

这个问题的核心是Webpack的模块隔离机制在搞事情：

Webpack默认会把每个JS文件当作一个独立的模块，模块内部的变量、函数都是局部作用域的，不会自动暴露到全局的window对象上。你之前直接在Blade的<script>里写函数时，它是直接挂在全局作用域的，所以调用没问题；但打包后，esFeatureDetect被封装在Webpack的模块闭包里了，全局环境根本找不到它，自然会报“not defined”错误——哪怕文件已经加载完成，window.onload也解决不了这个问题，因为本质不是加载顺序，而是作用域的问题。

具体解决方法 #

方法1：手动将函数挂载到window对象 #

在你的外部JS文件里，把函数直接绑定到window上，让它成为全局变量：

function esFeatureDetect() {
  console.log('Feature detection function has been called!');
}

// 手动暴露到全局
window.esFeatureDetect = esFeatureDetect;

这样修改后，你原来的Blade调用代码就能正常工作了，不用改<script>esFeatureDetect();</script>这部分。

方法2：修改Webpack配置自动暴露全局变量 #

如果不想手动改代码，可以调整Webpack的output配置，让打包后的模块自动把函数挂载到window上。找到你的Webpack配置文件（一般是webpack.config.js），修改output部分：

module.exports = {
  // ...其他配置
  output: {
    filename: 'full-feature-detect.js',
    path: path.resolve(__dirname, 'dist/js'),
    // 新增这两行
    library: 'esFeatureDetect', // 全局变量的名称
    libraryTarget: 'window' // 挂载到window对象上
  }
};

重新打包后，esFeatureDetect会自动成为window的属性，直接调用就行。

方法3：使用ES模块导入（适合更规范的项目） #

如果你的项目已经启用ES模块，可以在外部文件里导出函数：

export function esFeatureDetect() {
  console.log('Feature detection function has been called!');
}

然后在Blade的<script>里用import调用（注意要加type="module"）：

@push('scripts')
<script type="module">
  import { esFeatureDetect } from '/dist/js/full-feature-detect.js';
  esFeatureDetect();
</script>
@endpush

这种方式更符合现代JS的模块化规范，但需要确保你的环境支持ES模块（现代浏览器基本都支持）。

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