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(), // 压缩 JavaScriptnew 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 处理，因为最终的用户会在他们自己的项目中处理缓存问题。