忽略 webpack 中一些已安装的包答案

【问题标题】：Ignore some installed packages in webpack忽略 webpack 中一些已安装的包
【发布时间】：2021-06-13 02:28:37
【问题描述】：

我的 webpack 配置 工作正常 与 package.json:

{
  "peerDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-three-fiber": "4.0.21"
  },
  "dependencies": {
    // more unrelated packages
  },
  "devDependencies": {
    // more unrelated packages
  },
}

但是当我将react-three-fiber 添加到devDepedencies (storybook needs it) 时，它不起作用（模块包含在包中并且与多个反应渲染器存在冲突）：

{
  "peerDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-three-fiber": "4.0.21"
  },
  "dependencies": {
    // more unrelated packages
  },
  "devDependencies": {
    "react-three-fiber": "4.0.21",
    // more unrelated packages
  },
}

有什么方法可以忽略来自node_modules 的这些文件夹？

这是我的 webpack 配置：

module.exports = {
    mode: "production",
    devtool: "inline-source-map",
    entry: "./src/index.ts",
    target: ["web", "es5"],
    output: {
        filename: "index.js",
        pathinfo: false,
        libraryTarget: 'umd',
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/, 
                loader: "ts-loader",
                options: {
                    transpileOnly: true,
                    experimentalWatchApi: true,
                },
            }
        ]
    },
    externals: {
        "react": {
            commonjs: "react",
            commonjs2: "react"
        },
        "react-dom": {
            commonjs: "react-dom",
            commonjs2: "react-dom"
        },
        "react-three-fiber": {
            commonjs: "react-three-fiber",
            commonjs2: "react-three-fiber"
        }
    }
};

【问题讨论】：

如果storybook 需要它，它不应该将它们作为依赖项包含并通过自动解析器吗？
@Justinas 使用 dependencies 或 devDependencies 与 IMO 无关。由于node_modules 中的文件夹在运行构建时在这两种情况下都存在

标签： javascript reactjs webpack package.json storybook

【解决方案1】：

最后我用别名解决了。

我为react-three-fiber 创建了一个别名：

// package.json

  "devDependencies": {
    "storybook-react-three-fiber": "npm:react-three-fiber@4.0.21",
    // more unrelated packages
  },

执行npm install。

我扩展了 webpack 配置来使用它：

// .storybook/main.js

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias['react-three-fiber'] = path.resolve(__dirname, './../node_modules/storybook-react-three-fiber')
    return config
  },
  // more unrelated config
}

现在 Storybook 可以使用它，并且它被项目的 webpack 配置忽略，因为 node_modules 的文件夹名称现在是 storybook-react-three-fiber。

【讨论】：