Webpack项目中如何使用CommonJS插件并导入laz-perf？

1. 安装必要依赖 #

先安装适配CommonJS转换和laz-perf浏览器环境的依赖：

npm install --save-dev @babel/core @babel/preset-env babel-loader buffer stream-browserify path-browserify util assert
npm install laz-perf

2. 修改后的webpack.config.js配置 #

以下是调整后的完整配置，关键修改点已标注：

const webpack = require("webpack");
const path = require("path");
// 配置文件内导入laz-perf用于打印，此部分保留即可（Webpack配置运行在Node环境）
const lazPerf = require("laz-perf");
console.log(lazPerf);

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "docs"),
  },
  resolve: {
    fallback: {
      fs: false,
      // 补充laz-perf依赖的Node核心模块浏览器端替代
      buffer: require.resolve("buffer"),
      stream: require.resolve("stream-browserify"),
      path: require.resolve("path-browserify"),
      util: require.resolve("util/"),
      assert: require.resolve("assert/"),
    },
    extensions: [".cjs", ".js", ".json"], // 优先解析CommonJS模块
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // 将项目ES模块转换为CommonJS规范（按需配置）
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { modules: "commonjs" }]]
          }
        }
      },
      // 保留laz-perf原有的CommonJS格式，避免Webpack强制转换
      {
        test: /node_modules\/laz-perf/,
        type: "javascript/auto",
      }
    ],
  },
  devServer: {
    port: 8080,
    static: path.resolve(__dirname, "docs"),
    hot: true,
  },
  mode: "development",
  devtool: "cheap-module-source-map",
  plugins: [
    // 注入Buffer全局变量，适配laz-perf的Node环境依赖
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    new webpack.DefinePlugin({
      tree: {
        leafCapacity: 16,
        bufferCapacity: 16,
      },
    }),
  ],
};

3. 关键配置说明 #

• 配置文件内的laz-perf导入：完全合法，因为Webpack配置文件运行在Node环境，仅用于控制台打印的模块导入不会影响最终打包产物。
• resolve.fallback：补充laz-perf依赖的Node核心模块的浏览器端polyfill，解决Node模块在浏览器环境下的兼容性问题。
• Babel规则：通过@babel/preset-env将项目代码转换为CommonJS规范，若不需要强制转换，可将modules设为false，Webpack会自动处理模块兼容。
• javascript/auto类型：告知Webpack不对laz-perf模块进行ES强制转换，保留其原生CommonJS格式。
• ProvidePlugin：全局注入Buffer变量，解决laz-perf中直接使用Node环境Buffer的问题。

4. 项目中使用laz-perf #

在src/index.js中可直接用CommonJS规范导入：

const lazPerf = require('laz-perf');
// 也可使用ES模块导入（Webpack会自动转换兼容）
// import lazPerf from 'laz-perf';

// 调用laz-perf API
console.log(lazPerf);

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