Webpack 中 Include 和 Exclude 选项讲解

Webpack 中 Include 和 Exclude 选项讲解

Webpack 是前端开发中常用的模块打包工具，它能够将多个模块打包成一个或多个 bundle 文件，并且支持各种模块化规范。在 Webpack 的配置文件中，有两个非常重要的选项，即 Include 和 Exclude。这两个选项主要用于指定哪些文件需要被打包，哪些文件不需要被打包。

Include 选项

Include 选项用于指定需要被打包的文件路径。当 Webpack 执行打包时，只有匹配 Include 选项中指定的文件路径的文件才会被打包。这个选项非常实用，特别是在项目中存在大量无用文件的情况下。

下面是一个简单的示例代码：

// javascriptcn.com 代码示例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        loader: 'babel-loader'
      }
    ]
  }
};

在上面的代码中，我们使用了 Include 选项来指定只需要打包 src 目录下的所有 .js 文件。这样，其他文件就不会被打包到最终的 bundle 文件中了。

Exclude 选项

Exclude 选项用于指定不需要被打包的文件路径。当 Webpack 执行打包时，所有匹配 Exclude 选项中指定的文件路径的文件都不会被打包。这个选项同样非常实用，特别是在项目中存在一些第三方库或者不需要打包的文件的情况下。

下面是一个简单的示例代码：

// javascriptcn.com 代码示例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],
        loader: 'babel-loader'
      }
    ]
  }
};

在上面的代码中，我们使用了 Exclude 选项来指定不需要打包 node_modules 目录下的所有 .js 文件。这样，我们的最终 bundle 文件就不会包含这些第三方库的代码了。

总结

Include 和 Exclude 选项是 Webpack 中非常重要的两个选项，它们能够帮助我们更精确地控制打包过程中需要被包含和不需要被包含的文件。通过合理地使用这两个选项，我们可以有效地减小 bundle 文件的体积，提高页面加载速度，优化项目性能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656e1af0d2f5e1655d64c642