在吊装的Lerna React项目中使用Webpack HMR。

Question

能否使用Webpack热模块替换(HMR)与 高举 Lerna React项目？

这是因为每个Lerna React包（以下面的例子为例）都是独立构建的，当一个webpack-dev-server在主项目上启动时（例如p3），它只能看到自己的变化（我指的是p3的变化），而不能看到它的依赖包（p1或p2）的变化。

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

如果是，请提供一个配置示例。

Answer 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.js项目能够移植单仓库包。