将 Webpack HMR 与提升的 Lerna React 项目一起使用答案

【问题标题】：Use Webpack HMR with a hoisted Lerna React Project将 Webpack HMR 与提升的 Lerna React 项目一起使用
【发布时间】：2020-08-16 13:41:55
【问题描述】：

是否可以将 Webpack 热模块替换 (HMR) 与提升 Lerna React 项目一起使用？

这是因为每个 Lerna React 包（见下文示例）都是独立构建的，当在主项目（例如 p3）上启动 webpack-dev-server 时，它只能看到自己的更改（我的意思是p3 仅更改）而不是其依赖项（p1 或 p2）更改位于其 monorepo 的其他包中

some_lerna_project
       /node_modules
       /packages
            /p1
              /src
              package.json
            /p2
              /src
              package.json
            /p3
              /src
              package.json
              webpack.confing.js
       lenra.json

如果是，请您提供一个示例配置吗？

【问题讨论】：

标签： reactjs webpack webpack-dev-server lerna webpack-hmr

【解决方案1】：

您需要将这些包作为转译文件的一部分。

// webpack.config.js

const path = require('path');

const PATH_DELIMITER = "[\\\\/]"; // match 2 antislashes or one slash

const safePath = (module) => module.split(/[\\\/]/g).join(PATH_DELIMITER);

const generateIncludes = (modules) => {
  return [
    new RegExp(`(${modules.map(safePath).join("|")})$`),
    new RegExp(
      `(${modules.map(safePath).join("|")})${PATH_DELIMITER}(?!.*node_modules)`
    ),
  ];
};

const transpileModules = ["@my-scope/p1", "@my-scope/p2"]; // using scoped packages

module.exports = {
  mode: "development",
  entry: {
    app: "./src/index.js",
    print: "./src/print.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.m?js$/,
        include: generateIncludes(transpileModules),
        use: {
          loader: "babel-loader",
          options: {
            // use your preferred babel config
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  resolve: {
    symlinks: false, // Avoid Webpack to resolve transpiled modules path to their real path
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

此代码基于next-transpile-modules，它使 Next.js 项目能够转译 mono-repo 包。

【讨论】：