如何用Webpack 4将ES6模块默认导出暴露为全局变量appScripts？

没问题，这个需求用Webpack 4的output配置就能轻松搞定，我给你一步步说清楚：

首先，你需要在项目的webpack.config.js文件里，针对output选项做三个关键配置，直接看完整的配置示例：

module.exports = {
  mode: 'development', // 根据需求换成 'production' 即可
  entry: './src/index.js', // 这里填你的ES6模块文件路径
  output: {
    filename: 'bundle.js', // 打包后的文件名，可自定义
    library: 'appScripts', // 你要的全局变量名
    libraryTarget: 'window', // 把变量挂载到浏览器的window对象上
    libraryExport: 'default' // 导出模块的default内容，这步很关键！
  }
};

给你拆解一下每个配置的作用：

• library: 'appScripts'：直接指定全局变量的名称，打包后这个变量就会暴露在全局上下文中
• libraryTarget: 'window'：告诉Webpack把这个变量挂载到window对象上，这样在浏览器环境里就能直接访问
• libraryExport: 'default'：因为你的模块是用export default导出的对象，必须加上这行，不然你拿到的会是一个包含default属性的包裹对象，而不是直接能用的那个导出对象

配置完之后，执行Webpack打包命令生成bundle.js，在HTML里引入这个打包文件后，你就能在全局上下文里直接用appScripts.CourseRequest和appScripts.HealthCarePlan啦！

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