无需自定义Webpack插件，能否在构建时为模块添加属性？

当然可以，不用自定义Webpack插件也能实现给指定模块添加属性的需求，这里分享几个实用方案：

方案1：入口文件包装模块 #

最直接的方式是在项目入口文件里包装目标模块，导入后手动添加属性再导出，后续其他模块统一引用这个修改后的版本：

// 入口文件 index.js
import MyModule from './path/to/MyModule';

// 注入自定义属性
MyModule.x = '自定义x属性值';
MyModule.y = 123;

// 导出修改后的模块供其他文件引用
export default MyModule;

之后项目里其他地方需要用MyModule时，直接导入这个入口文件的导出即可，Webpack构建时会把这些属性打包进最终的模块代码里。

方案2：用exports-loader修改模块导出 #

借助Webpack的exports-loader（Webpack 5+已内置，低版本需单独安装），在配置文件里给目标模块添加规则，直接注入属性：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        // 匹配你的MyModule文件路径
        test: /MyModule\.js$/,
        use: [
          {
            loader: 'exports-loader',
            options: {
              exports: [
                'default', // 保留原有默认导出
                'x: "通过loader注入的x值"',
                'y: 456'
              ]
            }
          }
        ]
      }
    ]
  }
};

配置完成后，Webpack处理MyModule.js时会自动给它添加x和y属性，其他模块导入后就能直接访问MyModule.x和MyModule.y。

方案3：DefinePlugin结合模块挂载（全局常量场景） #

如果x和y是全局统一的配置常量，可以用Webpack内置的DefinePlugin先定义这些常量，再在MyModule里挂载为属性：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 注意用JSON.stringify处理字符串，避免语法问题
      MODULE_X: JSON.stringify('全局配置的x值'),
      MODULE_Y: JSON.stringify(789)
    })
  ]
};

然后在MyModule.js里添加属性挂载：

// MyModule.js
// ...原有模块代码

// 挂载DefinePlugin定义的常量作为模块属性
MyModule.x = MODULE_X;
MyModule.y = MODULE_Y;

这种方式适合属性值需要全局统一配置的场景，不用修改入口文件，直接在模块内完成属性挂载。

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