如何从 WebPack 包中排除目录

Posted

技术标签:

【中文标题】如何从 WebPack 包中排除目录【英文标题】：How exclude directory from WebPack bundle 【发布时间】：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 【参考方案1】：

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

【讨论】：

以上是关于如何从 WebPack 包中排除目录的主要内容，如果未能解决你的问题，请参考以下文章

如何排除目录被 Webpack 捆绑？

如何使用 webpack 从项目根目录导入外部文件？

Webpack2，如何从构建中排除 react 和 react dom

如何从 webpack 生成的 NPM 包中正确加载资产？

如何从 html-webpack-plugin 生成的 index.html 中排除 bundle.css？

如何从 Webpack 捆绑 JS 文件中排除 style-loaders、css-loader 源代码？