玩转webpack：进阶配置指南

在本文中，我们将带领您探索 webpack 的进阶配置，包括：

• DefinePlugin：定义构建时的环境变量
• optimization：优化构建过程
• splitChunks：拆分代码块
• externals：排除外部依赖

1. DefinePlugin：定义构建时的环境变量

DefinePlugin 允许您在构建时定义环境变量，这些变量可以在您的代码中使用。这对于在不同的环境（如开发、测试和生产）中使用不同的配置非常有用。

例如，您可以使用 DefinePlugin 来定义一个名为 NODE_ENV 的环境变量，并在您的代码中使用它来选择不同的配置。

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

2. optimization：优化构建过程

optimization 允许您优化构建过程，以减少构建时间和输出文件的体积。

您可以使用 optimization 来配置以下选项：

• minimize：启用压缩
• splitChunks：拆分代码块
• runtimeChunk：提取运行时代码
• concatenateModules：合并模块

例如，您可以使用 optimization 来启用压缩和拆分代码块。

const webpack = require('webpack');

module.exports = {
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all'
    }
  }
};

3. splitChunks：拆分代码块

splitChunks 允许您将代码块拆分成更小的块，以便并行加载。这可以减少页面加载时间。

您可以使用 splitChunks 来配置以下选项：

• chunks：要拆分的代码块类型
• minSize：最小代码块大小
• maxSize：最大代码块大小
• minChunks：最小代码块使用次数
• maxAsyncRequests：最大异步请求数
• maxInitialRequests：最大初始请求数

例如，您可以使用 splitChunks 来将代码块拆分成大小为 30KB 的块，并最多允许 5 个异步请求。

const webpack = require('webpack');

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxAsyncRequests: 5,
      maxInitialRequests: 3
    }
  }
};

4. externals：排除外部依赖

externals 允许您排除某些依赖项，以便在构建时不将它们打包到输出文件中。这对于减少输出文件的体积非常有用。

您可以使用 externals 来配置以下选项：

• amd：排除 AMD 模块
• commonjs：排除 CommonJS 模块
• commonjs2：排除 CommonJS2 模块
• umd：排除 UMD 模块
• jsonp：排除 JSONP 模块
• require：排除 RequireJS 模块

例如，您可以使用 externals 来排除 jQuery。

const webpack = require('webpack');

module.exports = {
  externals: {
    jquery: 'jQuery'
  }
};

5. 总结

webpack 是一个现代化的 JavaScript 应用程序构建工具，它可以将各种模块化的资源（如 JavaScript、CSS、HTML 和图像）打包成一个或多个捆绑文件，以便在浏览器中运行。

本文深入探讨了 webpack 的进阶配置，包括 DefinePlugin、optimization、splitChunks 和 externals，帮助您构建更优化、更健壮的应用程序。