将Webpack HMR与吊装的Lerna React项目一起使用

Question

是否可以将Webpack热模块更换(HMR(与吊装的Lerna React项目一起使用？

这是因为每个Lerna React包(见下面的示例(都是独立构建的，当在主项目上启动webpack开发服务器(例如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

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

// 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-transfile模块，使next.js项目能够传输mono-repo包。