如何从 WebPack 包中排除目录

【问题标题】：How exclude directory from WebPack bundle如何从 WebPack 包中排除目录
【发布时间】：2021-11-22 15:41:57
【问题描述】：

我正在使用 Storybook 开发 React 组件。我在我的应用程序中导入的 SDK 的文档说要包含一个文件夹 '.storybook/src/cards/myCard/xSDK' 但不捆绑它。

我正在像这样进行 SDK 调用：importedSdkCall({SDKFolderPath: './xSDK'})。该文件夹与进行调用的组件位于同一目录中。

我得到：404 - http://localhost:6006/xSDK/x2.bundle.js

Storybook 允许我操作生成的 webpack.config 文件。这是该文件中的规则数组：

"rules": [
  {
    "test": {},
    "use": [
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/builder-webpack4/node_modules/babel-loader/lib/index.js",
        "options": {
          "cacheDirectory": "/Users/christopheroppedal/Repos/experience-library/node_modules/.cache/storybook/babel",
          "sourceType": "unambiguous",
          "presets": [
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-env/lib/index.js",
              {
                "shippedProposals": true,
                "loose": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/preset-typescript/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-react/lib/index.js",
              {
                "runtime": "automatic"
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-flow/lib/index.js"
          ],
          "plugins": [
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-block-scoping/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-decorators/lib/index.js",
              {
                "legacy": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
              {
                "loose": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-private-methods/lib/index.js",
              {
                "loose": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js",
              {
                "loose": true,
                "useBuiltIns": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-classes/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-parameters/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-destructuring/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-spread/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-for-of/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/babel-plugin-macros/dist/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-polyfill-corejs3/lib/index.js",
              {
                "method": "usage-global",
                "absoluteImports": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/core-js/index.js",
                "version": "3.15.2"
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-add-react-displayname/index.js"
          ],
          "overrides": [
            {
              "test": {},
              "plugins": [
                [
                  "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-react-docgen/lib/index.js",
                  {
                    "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES"
                  }
                ]
              ]
            }
          ]
        }
      }
    ],
    "include": [
      "/Users/christopheroppedal/Repos/experience-library"
    ],
    "exclude": {}
  },
  {
    "test": {},
    "use": [
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/babel-loader/lib/index.js",
        "options": {
          "sourceType": "unambiguous",
          "presets": [
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-env/lib/index.js",
              {
                "shippedProposals": true,
                "modules": false,
                "loose": true,
                "targets": "defaults"
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-react/lib/index.js"
          ],
          "plugins": [
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-block-scoping/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-decorators/lib/index.js",
              {
                "legacy": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
              {
                "loose": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-private-methods/lib/index.js",
              {
                "loose": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js",
              {
                "loose": true,
                "useBuiltIns": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-classes/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-parameters/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-destructuring/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-spread/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-for-of/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/babel-plugin-macros/dist/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-polyfill-corejs3/lib/index.js",
              {
                "method": "usage-global",
                "absoluteImports": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/core-js/index.js",
                "version": "3.15.2"
              }
            ]
          ]
        }
      }
    ]
  },
  {
    "test": {},
    "use": [
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/raw-loader/dist/cjs.js"
      }
    ]
  },
  {
    "test": {},
    "include": {},
    "use": [
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/builder-webpack4/node_modules/babel-loader/lib/index.js",
        "options": {
          "presets": [
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-env/lib/index.js",
              {
                "modules": "commonjs"
              }
            ]
          ]
        }
      }
    ]
  },
  {
    "test": {},
    "use": [
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/builder-webpack4/node_modules/babel-loader/lib/index.js",
        "options": {
          "babelrc": false,
          "configFile": false,
          "cacheDirectory": "/Users/christopheroppedal/Repos/experience-library/node_modules/.cache/storybook/babel",
          "sourceType": "unambiguous",
          "presets": [
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-env/lib/index.js",
              {
                "shippedProposals": true,
                "loose": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/preset-typescript/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-react/lib/index.js",
              {
                "runtime": "automatic"
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-flow/lib/index.js"
          ],
          "plugins": [
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-block-scoping/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-decorators/lib/index.js",
              {
                "legacy": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
              {
                "loose": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-private-methods/lib/index.js",
              {
                "loose": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js",
              {
                "loose": true,
                "useBuiltIns": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-classes/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-parameters/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-destructuring/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-spread/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-for-of/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/babel-plugin-macros/dist/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-polyfill-corejs3/lib/index.js",
              {
                "method": "usage-global",
                "absoluteImports": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/core-js/index.js",
                "version": "3.15.2"
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-add-react-displayname/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-react-jsx/lib/index.js",
              {
                "pragma": "React.createElement",
                "pragmaFrag": "React.Fragment"
              }
            ]
          ],
          "overrides": [
            {
              "test": {},
              "plugins": [
                [
                  "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-react-docgen/lib/index.js",
                  {
                    "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES"
                  }
                ]
              ]
            }
          ]
        }
      },
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@mdx-js/loader/index.js",
        "options": {
          "compilers": [
            null
          ],
          "remarkPlugins": [
            null,
            null
          ]
        }
      }
    ]
  },
  {
    "test": {},
    "exclude": {},
    "use": [
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/builder-webpack4/node_modules/babel-loader/lib/index.js",
        "options": {
          "babelrc": false,
          "configFile": false,
          "cacheDirectory": "/Users/christopheroppedal/Repos/experience-library/node_modules/.cache/storybook/babel",
          "sourceType": "unambiguous",
          "presets": [
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-env/lib/index.js",
              {
                "shippedProposals": true,
                "loose": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/preset-typescript/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-react/lib/index.js",
              {
                "runtime": "automatic"
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/preset-flow/lib/index.js"
          ],
          "plugins": [
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-block-scoping/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-decorators/lib/index.js",
              {
                "legacy": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
              {
                "loose": true
              }
            ],
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-private-methods/lib/index.js",
              {
                "loose": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js",
              {
                "loose": true,
                "useBuiltIns": true
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-classes/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-parameters/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-destructuring/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-spread/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-for-of/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/babel-plugin-macros/dist/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
            "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-polyfill-corejs3/lib/index.js",
              {
                "method": "usage-global",
                "absoluteImports": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/core-common/node_modules/core-js/index.js",
                "version": "3.15.2"
              }
            ],
            "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-add-react-displayname/index.js",
            [
              "/Users/christopheroppedal/Repos/experience-library/node_modules/@babel/plugin-transform-react-jsx/lib/index.js",
              {
                "pragma": "React.createElement",
                "pragmaFrag": "React.Fragment"
              }
            ]
          ],
          "overrides": [
            {
              "test": {},
              "plugins": [
                [
                  "/Users/christopheroppedal/Repos/experience-library/node_modules/babel-plugin-react-docgen/lib/index.js",
                  {
                    "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES"
                  }
                ]
              ]
            }
          ]
        }
      },
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@mdx-js/loader/index.js",
        "options": {
          "remarkPlugins": [
            null,
            null
          ]
        }
      }
    ]
  },
  {
    "test": {},
    "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/source-loader/dist/cjs/index.js",
    "options": {
      "injectStoryParameters": true,
      "inspectLocalDependencies": true
    },
    "enforce": "pre"
  },
  {
    "test": {},
    "sideEffects": true,
    "use": [
      "/Users/christopheroppedal/Repos/experience-library/node_modules/style-loader/dist/cjs.js",
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/css-loader/dist/cjs.js",
        "options": {
          "importLoaders": 1
        }
      },
      {
        "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js",
        "options": {
          "postcssOptions": {
            "config": false,
            "plugins": [
              null,
              null
            ]
          }
        }
      }
    ]
  },
  {
    "test": {},
    "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/file-loader/dist/cjs.js",
    "options": {
      "esModule": false,
      "name": "static/media/[path][name].[ext]"
    }
  },
  {
    "test": {},
    "loader": "/Users/christopheroppedal/Repos/experience-library/node_modules/url-loader/dist/cjs.js",
    "options": {
      "limit": 10000,
      "name": "static/media/[path][name].[ext]"
    }
  }
] ```

【问题讨论】：

  • 使用"exclude": { module or package name to exclude }

标签： javascript webpack storybook


【解决方案1】：

我通过更改为 create-react-app 项目并将捆绑的 SDK 移动到 /public 目录来解决此问题。

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2019-02-03
    • 2019-12-23
    • 2016-01-14
    • 2017-04-14
    • 2018-12-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode