使用纱线工作区时出现错误的 webpack 开发服务器

Posted 2023-02-16

【中文标题】使用纱线工作区时出现错误的 webpack 开发服务器

【英文标题】：Error webpack dev server when using yarn workspaces

【发布时间】：2020-05-27 20:57:49

【问题描述】：

在 yarn 工作区中安装 webpack、webpack-cli 和 webpack-dev-server 时出现错误“webpack-dev-server error cannot find module 'webpack-cli/bin/config/config-yargs'”。 在 repo 中安装它们时没有这个问题。

我检查了根目录和子目录中的 node_modules。看来这个config/config-yargs文件是安装在CHILD的node_module中，而不是ROOT的。

我必须手动将其从子级复制到根才能使其正常工作。

有没有办法正确安装？

我的根 package.json：

    "private": true,
    "workspaces": [
        "packages/server",
        "packages/front", <-- webpack has been installed her
    ],
    "name": "test",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"

子 package.json 的一部分

"devDependencies": 
        "@babel/core": "^7.8.4",
        "@babel/preset-env": "^7.8.4",
        "@babel/preset-react": "^7.8.3",
        "@babel/preset-typescript": "^7.8.3",
        "typescript": "^3.7.5",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"

webpack.config.js

const path = require("path");
const rules = [
    
        test: /\.(tsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
    ,
    
        test: /\.css$/,
        loader: ["style-loader", "css-loader"],
    ,
];
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = 
    target: "web",
    mode: "development",
    entry: "./src/examples/index.tsx",
    output: 
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    ,
    module:  rules ,
    resolve: 
        extensions: [".ts", ".tsx", ".js"],
    ,
    devServer: 
        contentBase: "./",
        port: 5000,
        historyApiFallback: true, 
    ,
    plugins: [
        new HtmlWebpackPlugin(
            title: "react typescript babel webpack boilerplate",
            template: "index.html",
        ),
    ],
;

【问题讨论】：

Yarn 在工作空间中应用的重复数据删除模型似乎打破了这个问题。可能PNPM会更好地完成这项工作，但它也有自己的限制（它基于符号链接，所以某些软件可能无法工作，以angular的ngcc为例）

【参考方案1】：

解决方案是使用带有webpack serve 命令的嵌入式devServer，请在此处阅读

https://webpack.js.org/guides/development/#using-webpack-dev-server

workspaces 可能还有其他问题，解决方案是 nohoist，请在此处阅读

https://classic.yarnpkg.com/blog/2018/02/15/nohoist/

Nohoist 对我来说没有用，直到我发现它应该用于 root package.json 而不是孩子，这是适合我的版本

"workspaces": 
"packages": [
  "package-1",
  "package-2",
],
"nohoist": [
  "**/webpack",
  "**/webpack/**",
  "**/webpack-dev-server",
  "**/webpack-dev-server/**",
  "**/@webpack-cli",
  "**/@webpack-cli/**",
  "**/webpack-cli",
  "**/webpack-cli/**"
]
,

您可能还想照常删除 node_modules :)