发布一个npm组件库包

Webpack 配置 (webpack.config.js)

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-library.js', // 输出文件
    library: 'MyLibrary', // 库名称
    libraryTarget: 'umd', // 支持多种模块化格式
    globalObject: 'this', // 解决 UMD 在浏览器和 Node.js 环境下的兼容性问题
  },
  externals: {
    react: 'react', // 不打包 React，使用外部的 React
    'react-dom': 'react-dom', // 不打包 ReactDOM
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'my-library.css',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(), // 压缩 JavaScript
      new CssMinimizerPlugin(), // 压缩 CSS
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 解析这些扩展名的文件
  },
};

• 外部依赖：在 externals 中配置不打包的依赖（例如 React 和 ReactDOM），并在 peerDependencies 中声明它们，以确保用户在使用你的库时会安装这些依赖。

Package.json 配置

{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/my-library.js", // CommonJS 入口
  "module": "dist/my-library.esm.js", // ESModule 入口
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "webpack --mode production"
  },
  "dependencies": {
    // 需要打包的依赖
  },
  "peerDependencies": {
    "react": "^17.0.0", // 作为 peer dependency
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "css-loader": "^6.0.0",
    "mini-css-extract-plugin": "^2.0.0",
    "terser-webpack-plugin": "^5.0.0",
    "css-minimizer-webpack-plugin": "^3.0.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

• main:

在使用npm包时，npm包中package.json中的dependencies、peerDependencies都会被安装到项目工程中，而devDependencies中的则不会。

思考：

在打包一个库文件时，需要对js、css等静态文件进行contenthash处理吗？

如果你打包的是一个 npm 库，通常不需要对输出文件进行 contenthash 处理，因为最终的用户会在他们自己的项目中处理缓存问题。