深入了解 Webpack 4：揭秘其强大的新特性和改进

2023-11-04 15:46:21

Webpack 4：进阶指南

模块联合

Webpack 4 引入了模块联合功能，它能够将多个模块合并到一个更大的模块中。这种方法可以显著提升应用程序性能，因为浏览器不必再去加载大量小文件。启用模块联合，只需在 webpack 配置文件里设置 optimization.concatenateModules 选项。

包清单

包清单是一个新文件，由 Webpack 4 自动生成，其中包含打包模块的信息，诸如模块路径和大小等。此清单能够用于调试和分析 webpack 构建过程。通过设置 optimization.runtimeChunk 选项，你可以配置包清单。

长效缓存

Webpack 4 的长效缓存功能可以大幅提高增量构建的速度。它通过存储模块的哈希值，在模块未发生变更时使用缓存的哈希值来避免模块的重新构建。这可以极大地缩短构建时间，尤其是在处理大型应用程序时。要启用长效缓存，需要设置 optimization.cacheGroups 选项。

优化 CSS

Webpack 4 对 CSS 处理进行了改进，加入了对 CSS 模块的支持，能够在 JavaScript 模块中直接导入和使用 CSS。此外，它还集成了 PostCSS，一个强大的 CSS 处理工具，用于自动前缀、缩小和优化 CSS 代码。

Tree Shaking

Tree shaking 是一种优化技术，用于移除未使用的代码。Webpack 4 通过改进的算法进一步加强了此功能，能够更加准确地识别未使用的代码，从而生成更小的捆绑包。要使用 tree shaking，需设置 optimization.usedExports 选项。

HMR（热模块替换）

HMR 能够在开发过程中更新模块，而不需要重新加载整个页面。Webpack 4 增强了对 HMR 的支持，使其更加可靠和快速。启用 HMR，只需设置 devServer.hot 选项。

其他改进

除了上述特性之外，Webpack 4 还进行了其他多项改进，包括：

改进 JavaScript 模块解析
支持多种输出格式
错误和警告报告增强
插件系统更加灵活

示例代码

以下示例演示了如何使用 webpack 4 构建一个简单的 JavaScript 应用程序：

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    hot: true,
  },
};