如何排除目录被 Webpack 捆绑？答案

【问题标题】：How to exclude directory from getting bundled by Webpack?如何排除目录被 Webpack 捆绑？
【发布时间】：2019-02-03 04:12:54
【问题描述】：

预期：

当我使用 webpack 构建时，除了 ./src/Portfolio 目录中的文件之外，我的所有 JS 文件都会根据我的 Webpack.config.js 设置进行捆绑。

实际：

Webpack 捆绑所有文件，包括目录中的文件，尽管我在 webpack.config.js 中提供了设置和其他变体。

代码：

Webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  devtool: 'source-map',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [
          path.resolve(__dirname, './src/Portfolio/')
        ]
      }
    ]
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

输出：

如何成功排除 ./src/Portfolio 目录及其内容？

【问题讨论】：

你可以试试path.resolve(__dirname, './src/Portfolio/*') 吗？
投资组合目录仍然被包括在内，输出没有改变。我用 npx webpack 运行

标签： javascript npm webpack

【解决方案1】：

根据您的文件夹结构，您似乎没有为其提供要排除的正确目录位置。我认为这样的事情应该可行，但如果不是，请分享您的文件夹结构。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  devtool: 'source-map',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [
          './src/Portfolio/'
        ]
      }
    ]
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

【讨论】：

奇怪的是它起作用了！谢谢老兄！，我们也是你的忠实粉丝 Chris，多年来，请随时光临并加入我们的 Youtube 开发者社区discord.gg/gE5kZx您将立即成为 VIP 干杯
太棒了:) 谢谢！我会期待加入。我最近一直很忙，但开始平衡了。
如何排除，排除数组中的多个文件夹，我用过但不适合我。 exclude: [ /node_modules/, path.resolve(__dirname, 'images/' + project.appName) ]
@Anupam Maurya，我认为您必须使用 RegEx 而不是字符串数组。这是工作排除：[/node_modules/，/images/，/content/]

【解决方案2】：

我知道操作正在使用 javascript，仅供参考，使用带有 webpack 的 typescript 可能会出现类似的问题。

在这种情况下，可以将排除的目录添加到tsconfig.json 而不是webpack.config.js，

//tsconfig.json

{
    "compilerOptions": {
        ...
    },
    "exclude": [
        "./src/Portfolio/",
    ]
}

【讨论】：