使用 Webpack 构建 NPM Library 的正确方式

mkdir test-lib && cd test-lib
npm init -y

yarn add -D webpack webpack-cli

mkdir src
touch src/index.js

// test-lib/src/index.js
export const add = (a, b) => a + b

export const multiply = (a, b) => a * b

├─ test-lib
│  ├─ package.json
│  ├─ src
│  │  └─ index.js

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  }
};

module.exports = {
  // ...
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
+   library: {
+     name: "TestLib",
+     type: "umd",
+   },
  },
  // ...
};

// webpack.config.js
output: {
  library: {
    type: 'commonjs2',  // 或 'commonjs'
  }
}

module.exports = (() => {
  // ... 模块代码
  return { add, multiply };
})();

// webpack.config.js
output: {
  library: {
    name: 'TestLib',
    type: 'umd',
  }
}

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports["TestLib"] = factory();
  else
    root["TestLib"] = factory();
})(self, function() {
  return { add: (a, b) => a + b, multiply: (a, b) => a * b };
});

<!-- HTML 中直接使用 -->
<script src="https://unpkg.com/test-lib/dist/main.js"></script>
<script>
  TestLib.add(1, 2);  // 通过全局变量访问
</script>

// ES Module
import { add } from 'test-lib';

// CommonJS
const { add } = require('test-lib');

// webpack.config.js
module.exports = {
  experiments: {
    outputModule: true,  // 启用实验性特性
  },
  output: {
    library: {
      type: 'module',
    },
    filename: '[name].mjs',  // 建议使用 .mjs 扩展名
  },
};

// 输出纯 ES Module 格式
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// webpack.config.js
output: {
  library: {
    name: 'TestLib',
    type: 'var',  // 默认值，挂载为全局变量
  }
}

var TestLib = (function() {
  return { add: (a, b) => a + b };
})();

output: {
  library: {
    name: ['MyCompany', 'Utils', 'Math'],
    type: 'umd',
  }
}

// 访问方式
MyCompany.Utils.Math.add(1, 2);

output: {
  library: {
    type: 'module',
    // 不设置 name，因为 ESM 使用命名导出
  }
}

// src/index.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export default { add, multiply };

// webpack.config.js
output: {
  library: {
    name: 'TestLib',
    type: 'umd',
    export: 'default',  // 只导出 default
  }
}

// webpack.config.js（ESM-first 配置）
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'index.mjs',      // 使用 .mjs 扩展名标识 ESM
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'module',           // ES Module 输出
    },
    module: true,               // 启用 ESM 输出（Webpack 5.96.1+）
  },
  experiments: {
    outputModule: true,         // 兼容旧版本的实验性特性开关
  },
};

// 方式一：检查 Webpack 版本（推荐）
const webpackVersion = require('webpack/package.json').version;

module.exports = {
  // ...
  ...(webpackVersion.startsWith('5.') && parseInt(webpackVersion.split('.')[1]) < 96
    ? { experiments: { outputModule: true } }
    : { output: { module: true } }),
};

// 方式二：统一使用（向后兼容）
module.exports = {
  output: {
    module: true,  // 新版本识别此配置
  },
  experiments: {
    outputModule: true,  // 旧版本需要此配置
  },
};

{
  "name": "test-lib",
  "version": "1.0.0",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    },
    "./utils": {
      "import": "./dist/utils.mjs",
      "require": "./dist/utils.cjs"
    }
  }
}

{
  "name": "modern-esm-lib",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
    "./package.json": "./package.json"
  },
  "files": ["dist"]
}

{
  "name": "dual-format-lib",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.mts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.cjs"
      }
    },
    "./utils": {
      "import": "./dist/utils.mjs",
      "require": "./dist/utils.cjs"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts"
}

{
  "name": "awesome-components",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./Button": {
      "import": "./dist/Button.mjs",
      "require": "./dist/Button.cjs",
      "types": "./dist/Button.d.ts"
    },
    "./Input": {
      "import": "./dist/Input.mjs",
      "require": "./dist/Input.cjs",
      "types": "./dist/Input.d.ts"
    },
    "./styles": "./dist/styles.css",
    "./package.json": "./package.json"
  },
  "sideEffects": [
    "**/*.css",
    "**/*.scss"
  ]
}

// 按需导入单个组件（Tree-shaking 友好）
import { Button } from 'awesome-components/Button';
import { Input } from 'awesome-components/Input';

// 导入样式
import 'awesome-components/styles';

exports > main/module/browser/types

{
  "name": "my-awesome-lib",
  "version": "2.0.0",
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.mts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.cjs"
      }
    }
  },
  "files": ["dist"],
  "sideEffects": false,
  "engines": {
    "node": ">=14.18"
  }
}

// src/index.js
import _ from "lodash";

export const add = (a, b) => a + b;

export const max = _.max;

// webpack.config.js
module.exports = {
  // ...
+  externals: {
+   lodash: {
+     commonjs: "lodash",
+     commonjs2: "lodash",
+     amd: "lodash",
+     root: "_",
+   },
+ },
  // ...
};

{
  "name": "6-1_test-lib",
  // ...
+ "peerDependencies": {
+   "lodash": "^4.17.21"
+ }
}

// webpack.config.js
const nodeExternals = require('webpack-node-externals');

module.exports = {
  // ...
+  externals: [nodeExternals()]
  // ...
};

// src/index.js
import crypto from 'crypto';

export function hash(data) {
  return crypto.createHash('sha256').update(data).digest('hex');
}

Module not found: Error: Can't resolve 'crypto' in '...'

// webpack.config.js
module.exports = {
  target: 'node',  // 或 'node-current'、'async-node'
  externals: [
    nodeExternals({
      allowlist: [],  // 允许打包的模块（一般留空）
    }),
  ],
};

// webpack.config.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  plugins: [
    new NodePolyfillPlugin(),
  ],
};

// webpack.config.js
module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer/'),
    },
  },
};

// webpack.config.js
const isNodeTarget = process.env.TARGET === 'node';

module.exports = {
  target: isNodeTarget ? ['node', 'es2020'] : ['web', 'es2020'],
  externals: isNodeTarget ? [nodeExternals()] : {},
  resolve: {
    fallback: isNodeTarget ? {} : {
      crypto: false,
      stream: false,
    },
  },
};

yarn add -D webpack-node-externals

const nodeExternals = require('webpack-node-externals');

module.exports = {
  externals: [nodeExternals()],
};

externals: [nodeExternals({
  allowlist: [/^lodash/, /^@babel/],  // 白名单：这些模块仍然被打包
  importType: 'commonjs2',             // 外部模块的类型
  modulesDir: path.resolve(__dirname, 'node_modules'),  // node_modules 路径
  modulesFromFile: true,               // 从 package.json 读取依赖
})],

+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
+ module: {
+   rules: [
+     {
+       test: /\.css$/,
+       use: [MiniCssExtractPlugin.loader, "css-loader"],
+     },
+   ],
+ },
+ plugins: [new MiniCssExtractPlugin({
+   filename: '[name].css',
+ })],
};

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: {
                localIdentName: '[local]__[hash:base64:5]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer', 'postcss-preset-env'],
              },
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

// webpack.config.js
module.exports = {
  // ...
+ devtool: 'source-map'
};

├─ test-lib
│  ├─ package.json
│  ├─ webpack.config.js
│  ├─ src
│  │  ├─ index.css
│  │  └─ index.js
│  └─ dist
│     ├─ main.js
│     ├─ main.js.map
│     ├─ main.css
│     └─ main.css.map

module.exports = {
  devtool: 'source-map',  // 生成独立的 .map 文件
  // 其他配置...
};

// ❌ 有副作用的代码
import './polyfill.js';  // 导入即执行
window.globalVar = 'value';  // 修改全局对象
Array.prototype.myMethod = function() {};  // 扩展原型链

// ✅ 无副作用的代码
export const add = (a, b) => a + b;  // 纯函数定义
export class Utils {}  // 类定义

{
  "sideEffects": false
}

{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js",
    "./src/register-components.js"
  ]
}

{
  "name": "my-utils",
  "sideEffects": [
    "**/*.css",
    "**/*.scss",
    "./register.ts"
  ]
}

// src/index.js
// 这些导出都是无副作用的，可以被 Tree-shaking
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 如果用户只 import { add }，subtract 会被移除

// src/utils.js

// ❌ Webpack 不确定是否有副作用，可能不会被 Tree-shaking
const result = someFunction();

// ✅ 明确告诉 Webpack 这是纯调用，可以安全移除
const result = /*#__PURE__*/someFunction();

// 创建对象
const config = /*#__PURE__*/({
  key: 'value',
  foo: 'bar',
});

// 函数调用
const result = /*#__PURE__*/calculateSomething(a, b);

// 条件表达式
const value = /*#__PURE__*/condition ? x : y;

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: false,  // 保持 ESM 以便 Tree-shaking
    }],
  ],
};

// src/math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

// 使用方
import { add } from './math';  // 只会打包 add

// src/math.js
export default {
  add: (a, b) => a + b,
  multiply: (a, b) => a * b,
};

// 使用方
import math from './math';
math.add(1, 2);  // 整个对象都会被打包

// src/math.js（内部实现）
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

// 同时支持默认导出和命名导出
export { add, multiply };
export default { add, multiply };

// 使用方可以选择任一方式
import { add } from './math';  // ✅ Tree-shaking 友好
import math from './math';     // ⚠️ 会打包全部

// src/index.js（主入口）
// 所有子模块都使用命名导出
export { add, multiply, divide } from './math';
export { format, parse } from './string';
export { fetchJSON, postData } from './http';

// 默认导出聚合所有功能（可选）
export default {
  math: { add, multiply, divide },
  string: { format, parse },
  http: { fetchJSON, postData },
};

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',

  output: {
    filename: 'index.umd.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      name: 'TestLib',
      type: 'umd',
      export: 'default',
    },
    globalObject: 'this',
    umdNamedDefine: true,
  },

  externals: {
    react: {
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
      root: 'React',
    },
    'react-dom': {
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
      root: 'ReactDOM',
    },
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: '> 0.25%, not dead' }],
              '@babel/preset-react',
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'index.css',
    }),
  ],

  devtool: 'source-map',

  optimization: {
    minimize: true,
  },
};

{
  "name": "test-lib-umd",
  "version": "1.0.0",
  "main": "dist/index.umd.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "scripts": {
    "build": "webpack --config webpack.config.umd.js",
    "build:prod": "NODE_ENV=production webpack --config webpack.config.umd.js"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4",
    "babel-loader": "^9.1.3",
    "@babel/core": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.24.0",
    "mini-css-extract-plugin": "^2.8.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^7.1.0"
  }
}

<!-- CDN 引入 -->
<script src="https://unpkg.com/test-lib-umd/dist/index.umd.js"></script>
<script>
  TestLib.add(1, 2);
</script>

// CommonJS
const TestLib = require('test-lib-umd');

// ES Module
import TestLib from 'test-lib-umd';

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'production',
  target: ['node', 'es2020'],
  entry: './src/index.js',

  output: {
    filename: 'index.cjs',
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'commonjs2',
    },
  },

  externals: [nodeExternals()],

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { node: 'current' },
                modules: false,
              }],
            ],
          },
        },
      },
    ],
  },

  devtool: 'source-map',

  optimization: {
    minimize: false,  // Node.js 通常不需要压缩
  },
};

{
  "name": "test-lib-cjs",
  "version": "1.0.0",
  "main": "dist/index.cjs",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "scripts": {
    "build": "webpack --config webpack.config.cjs.js"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4",
    "webpack-node-externals": "^3.0.0",
    "babel-loader": "^9.1.3"
  }
}

// CommonJS（Node.js）
const { add, multiply } = require('test-lib-cjs');

console.log(add(1, 2));  // 3

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  target: ['web', 'es2020'],
  entry: './src/index.js',

  output: {
    filename: 'index.mjs',
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'module',
    },
    module: true,
    environment: {
      module: true,
      dynamicImport: true,
    },
  },

  experiments: {
    outputModule: true,  // Webpack < 5.96 需要
  },

  externalsType: 'module',  // 外部依赖也使用 ESM

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: '> 0.25%, not dead',
                modules: false,  // 保持 ESM！重要！
                bugfixes: true,
              }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'index.css',
    }),
  ],

  devtool: 'source-map',

  optimization: {
    usedExports: true,
    innerGraph: true,
    sideEffects: true,
  },
};

{
  "name": "test-lib-esm",
  "version": "2.0.0",
  "type": "module",
  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.mts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.cjs"
      }
    },
    "./styles": "./dist/index.css"
  },
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "sideEffects": [
    "**/*.css"
  ],
  "scripts": {
    "build:esm": "webpack --config webpack.config.esm.js",
    "build:cjs": "webpack --config webpack.config.cjs.js",
    "build": "npm run build:esm && npm run build:cjs"
  },
  "engines": {
    "node": ">=14.18"
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4",
    "mini-css-extract-plugin": "^2.8.0",
    "babel-loader": "^9.1.3"
  }
}

// ES Module（完美 Tree-shaking）
import { add } from 'test-lib-esm';  // 只导入需要的函数
import 'test-lib-esm/styles';       // 单独导入样式

console.log(add(1, 2));

const path = require('path');
const { merge } = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const nodeExternals = require('webpack-node-externals');

const baseConfig = {
  mode: 'production',
  entry: './src/index.js',

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                modules: false,  // 保持 ESM
              }],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],

  devtool: 'source-map',
};

const esmConfig = merge(baseConfig, {
  target: ['web', 'es2020'],
  output: {
    filename: 'index.mjs',
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'module',
    },
    module: true,
  },
  experiments: {
    outputModule: true,
  },
  externalsType: 'module',
  optimization: {
    usedExports: true,
  },
});

const cjsConfig = merge(baseConfig, {
  target: ['node', 'es2020'],
  output: {
    filename: 'index.cjs',
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'commonjs2',
    },
  },
  externals: [nodeExternals()],
});

const umdConfig = merge(baseConfig, {
  target: ['web', 'es2020'],
  output: {
    filename: 'index.umd.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      name: 'TestLib',
      type: 'umd',
    },
    globalObject: 'this',
  },
  externals: {
    react: {
      commonjs2: 'react',
      amd: 'react',
      root: 'React',
    },
  },
});

module.exports = [esmConfig, cjsConfig, umdConfig];

{
  "name": "test-lib-universal",
  "version": "3.0.0",
  "type": "module",
  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "browser": "dist/index.umd.js",
  "unpkg": "dist/index.umd.js",
  "jsdelivr": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.mts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.cjs"
      }
    },
    "./styles": "./dist/index.css",
    "./package.json": "./package.json"
  },
  "files": [
    "dist"
  ],
  "sideEffects": [
    "**/*.css",
    "**/*.scss"
  ],
  "scripts": {
    "build": "webpack --config webpack.config.universal.js",
    "build:dev": "webpack --mode=development --config webpack.config.universal.js",
    "prepublishOnly": "npm run build"
  },
  "engines": {
    "node": ">=14.18"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4",
    "webpack-merge": "^5.10.0",
    "webpack-node-externals": "^3.0.0",
    "mini-css-extract-plugin": "^2.8.0",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0"
  }
}

dist/
├── index.mjs         # ES Module 格式
├── index.mjs.map     # ESM Sourcemap
├── index.cjs         # CommonJS 格式
├── index.cjs.map     # CJS Sourcemap
├── index.umd.js      # UMD 格式（浏览器/CDN）
├── index.umd.js.map  # UMD Sourcemap
├── index.css         # 样式文件
├── index.css.map     # CSS Sourcemap
└── index.d.ts        # TypeScript 类型声明

// 方式 1：ES Module（推荐，支持 Tree-shaking）
import { add } from 'test-lib-universal';

// 方式 2：CommonJS
const { add } = require('test-lib-universal');

// 方式 4：单独导入样式
import 'test-lib-universal/styles';

<!-- 方式 3：HTML Script 标签 -->
<script src="https://unpkg.com/test-lib-universal/dist/index.umd.js"></script>
<script>TestLib.add(1, 2)</script>

src/
*.ts
*.map
webpack.config.*
.babelrc
.vscode/
.idea/
.github/
tests/
__tests__/
coverage/
*.log
.DS_Store

{
  "name": "test-lib",
  "scripts": {
    "build": "webpack --mode=production",
    "prepublishOnly": "npm run build",
    "prepublishOnly:cjs": "webpack --config webpack.config.cjs.js --mode=production",
    "prepublishOnly:esm": "webpack --config webpack.config.esm.js --mode=production"
  }
}

{
  "files": [
    "dist",
    "README.md",
    "LICENSE"
  ]
}

{
  "name": "@scope/my-awesome-library",
  "version": "1.0.0",
  "description": "An awesome library built with Webpack 5",
  "license": "MIT",
  "author": "Your Name <email@example.com>",
  "repository": {
    "type": "git",
    "url": "https://github.com/username/my-awesome-library.git"
  },
  "keywords": ["utility", "library", "esm", "tree-shakable"],
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.mts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.cjs"
      }
    },
    "./styles": "./dist/style.css",
    "./package.json": "./package.json"
  },
  "files": ["dist", "README.md", "LICENSE"],
  "sideEffects": ["**/*.css", "**/*.scss"],
  "scripts": {
    "build": "webpack --mode=production",
    "build:dev": "webpack --mode=development",
    "watch": "webpack --watch",
    "clean": "rm -rf dist",
    "prepublishOnly": "npm run clean && npm run build",
    "test": "jest",
    "lint": "eslint src/",
    "typecheck": "tsc --noEmit"
  },
  "peerDependencies": {
    "react": ">=17.0.0"
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4",
    "typescript": "^5.4.0",
    "@types/react": "^18.2.0",
    "babel-loader": "^9.1.3",
    "@babel/core": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.24.0",
    "@babel/preset-typescript": "^7.24.0",
    "mini-css-extract-plugin": "^2.8.0",
    "css-loader": "^7.1.0",
    "postcss-loader": "^8.1.0",
    "sass-loader": "^14.2.0",
    "webpack-merge": "^5.10.0",
    "clean-webpack-plugin": "^4.0.0",
    "eslint": "^8.57.0",
    "jest": "^29.7.0"
  },
  "engines": {
    "node": ">=16.0.0",
    "npm": ">=8.0.0"
  },
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
  }
}

// UMD（通用）
output: { library: { name: 'Lib', type: 'umd' } }

// CommonJS（Node.js）
output: { library: { type: 'commonjs2' } }

// ES Module（现代化）
output: { library: { type: 'module' }, module: true }
experiments: { outputModule: true }

// Global Variable（简单场景）
output: { library: { name: 'Lib', type: 'var' } }

{
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "sideEffects": false,
  "files": ["dist"]
}

npm run build

npm publish  # 自动触发 prepublishOnly

npm link
cd ../test-project
npm link my-lib

ls -la dist/