如何通过Webpack使模块编译后消失并将其静态字段值内联？

这事儿其实用Webpack的内置工具或者Tree Shaking就能搞定，分两种适配场景给你说清楚：

场景一：直接用Webpack DefinePlugin注入常量（无需修改原模块） #

如果不想改动你现有的CommonJS模块写法，最直接的方式是用Webpack内置的DefinePlugin，它能在编译阶段把指定的标识符直接替换成常量值，这样原模块文件甚至可以直接删掉，完全不会出现在打包结果里。

配置步骤： #

1. 打开你的Webpack配置文件，引入并配置DefinePlugin：

const webpack = require('webpack');

module.exports = {
  // 你的其他Webpack配置（entry、output等）
  plugins: [
    new webpack.DefinePlugin({
      // 注意要用JSON.stringify包裹，确保值的类型正确（比如数字、字符串都能正确处理）
      'Info.VALUE_ONE': JSON.stringify(123),
      'Info.VALUE_TWO': JSON.stringify(456),
      'Info.VALUE_THREE': JSON.stringify(789)
    })
  ]
};

2. 修改你的业务代码，删掉所有导入Info模块的语句（比如const Info = require('./Info')），直接使用Info.VALUE_ONE这类标识符即可——Webpack会自动把它们替换成对应的常量值。

场景二：结合Tree Shaking（推荐ES模块写法） #

如果可以把原模块改成ES模块的写法，Tree Shaking会是更优雅的方案，它能自动剔除未使用的代码，同时把用到的常量值内联，最终打包结果里不会留下原模块的任何痕迹。

操作步骤： #

1. 把你的Info模块改成ES模块：

// Info.js
export const VALUE_ONE = 123;
export const VALUE_TWO = 456;
export const VALUE_THREE = 789;

2. 确保Webpack配置开启Tree Shaking：
   • 如果你的mode设置为production，Tree Shaking默认是开启的，无需额外配置；
   • 如果是development模式，需要手动添加以下配置：

module.exports = {
  mode: 'development',
  optimization: {
    usedExports: true // 告诉Webpack标记出未使用的代码
  }
};

3. 在业务代码中按需导入常量：

// 只导入需要的常量，不要导入整个模块
import { VALUE_ONE, VALUE_TWO } from './Info';

console.log(VALUE_ONE); // 编译后会变成 console.log(123)
console.log(VALUE_TWO); // 编译后会变成 console.log(456)

编译完成后，原Info模块的代码会被完全移除，所有用到的常量值都会直接内联到引用位置。

注意事项： #

• CommonJS模块的Tree Shaking效果很差，因为Webpack很难静态分析动态的require语句，所以如果想用Tree Shaking，尽量转成ES模块；
• 使用DefinePlugin时，一定要删除所有导入原Info模块的语句，否则原模块代码还是会被打包进去；
• 如果需要在Babel编译阶段就完成替换，也可以用babel-plugin-transform-define插件，配置逻辑和DefinePlugin类似。

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