如何在其他项目中使用webpack打包bundle文件内的对象与类

问题根源 #

• 你当前使用CopyWebpackPlugin直接复制预构建的analysis.bundle.js到输出目录，webpack默认不会把它识别为可导入的模块，不会解析它的内部导出
• Galaxy的client包默认打包产物没有配置符合ES Module/CommonJS规范的导出，你要导入的bundleEntries默认要么挂载在全局window对象上，要么仅支持内部模块系统调用
• 你当前的导入语句存在文件名拼写错误：你写的是./analysis.bundled.js，实际产物文件名是analysis.bundle.js，多了字母d，请先排除这个低级错误

可落地的解决方法 #

方法一：无需修改Galaxy client打包配置（推荐，无需改动上游代码） #

你可以通过webpack的loader配置，让webpack正确识别该文件的导出，有两种实现方式：

1. 浏览器环境下可接受全局变量调用
   安装script-loader，作用是将目标JS文件作为全局脚本执行，内部挂载的全局变量可以直接读取：
   第一步：安装依赖

   npm install script-loader --save-dev
   

   第二步：在需要使用的文件中按如下方式导入

   // 先执行analysis.bundle.js，将bundleEntries挂载到window
   import 'script-loader!./analysis.bundle.js'
   // 直接使用全局变量即可
   console.log(window.bundleEntries)
   

2. 希望像普通模块一样导入，或需要在Node.js环境运行
   安装exports-loader，主动告诉webpack该文件的导出对象为bundleEntries：
   第一步：安装依赖

   npm install exports-loader --save-dev
   

   第二步：在你的webpack配置的rules数组中新增一条规则

   var rules = [
       // 原有规则保留，新增下面这一条
       {
           test: /analysis\.bundle\.js$/,
           loader: 'exports-loader',
           options: {
               exports: 'bundleEntries'
           }
       },
       { test: /\.css$/, use: ['style-loader', 'css-loader']},
       { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i, use: ['file-loader','url-loader','svg-url-loader'] }
   ]
   

   第三步：正常导入使用即可

   import bundleEntries from './analysis.bundle.js'
   

方法二：修改Galaxy client的打包配置（更规范，适合长期维护的场景） #

找到Galaxy client包的webpack配置，修改output配置项，指定产物为UMD格式且导出变量为bundleEntries：

output: {
  // 原有配置保留，新增下面两项
  library: 'bundleEntries',
  libraryTarget: 'umd'
}

重新打包client后，生成的analysis.bundle.js就会同时支持ES Module、CommonJS、AMD等多种模块规范，你可以直接在项目中导入使用，不需要额外配置loader。

额外优化建议 #

你当前的三份webpack配置都配置了CopyWebpackPlugin复制整个lib目录，其实没有必要：如果已经通过loader处理了analysis.bundle.js，webpack会自动将依赖的文件打包到输出目录，不需要手动复制，避免冗余文件和路径错误。

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