Module 02 · Introduction to Automated Build Tools (Webpack)自动化构建工具（Webpack）简介

Setting up Production with Webpack使用 Webpack 进行生产环境设置

观看完本视频后，您将能够：

识别 Webpack 的不同配置模式
讨论 Webpack 在生产环境中的最佳实践

Webpack 配置模式概述

Webpack 提供了一种 模式（mode）配置选项，用于指示 Webpack 适当地利用其内置优化功能。

您可以将 mode 设为 "none" 以禁用默认行为。但通常，Webpack 主要提供两种模式：

模式	功能
开发模式（development）	启用 `NamedChunksPlugin`，避免代码压缩，提供更好的调试支持，打包文件可读性强，包含更多注释。
生产模式（production）	默认模式，启用所有可能的优化，如 Tree Shaking、性能提示（performance hints）及代码压缩（TerserWebpackPlugin），最大化构建优化。

开发模式 VS 生产模式

在 Webpack 中，开发模式 和 生产模式 的目标完全不同：

开发模式（Development）	生产模式（Production）
强调源映射（source mapping），方便调试	目标是最小化打包体积，提高网站加载速度
本地服务器，支持热更新（Hot Module Replacement）	代码压缩（minification），去除多余字符，提高运行效率
代码可读性强，包含详细注释	优化静态资源（如 CSS、JS），减少 HTTP 请求
适合调试与开发	适用于生产环境的最终代码

尽管它们有不同的目的，但为了保持一致性，通常会创建一个 通用配置（common），然后分别对开发模式和生产模式进行定制。

Webpack 生产环境最佳实践

在生产模式下，Webpack 通过多种方式 优化构建，提升网站的性能。以下是几项关键的生产环境最佳实践：

1CSS 压缩（Minifying CSS）

CSS 压缩 是指移除不必要的字符，例如 注释、空格、缩进，以减少 CSS 文件的大小，从而提升网站加载速度。

如何压缩 CSS

安装插件

npm install optimize-css-assets-webpack-plugin --save-dev

更新 Webpack 配置

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new OptimizeCssAssetsPlugin()],
  },
};

2生成 Source Maps（源码映射）

Source Maps 在构建时与已压缩的文件一起生成。它们的作用是 将压缩代码追溯到原始代码，便于调试。

如何在 Webpack 生成 Source Maps

Webpack 内置支持 Source Maps，只需在 devtool 选项中配置：

module.exports = {
  devtool: 'source-map', // 生成 Source Map 方便调试
};

这样，开发者可以查看优化后的代码，并回溯到原始源码。

3文件哈希（File Hashing）

文件哈希 通过为文件名添加哈希值，使网站在更新文件后仍然能够保持缓存，避免浏览器加载旧文件。

文件哈希的作用

提高缓存命中率：浏览器不会重复下载相同文件
避免文件覆盖：网站发布新版本后，浏览器不会加载旧资源

如何实现文件哈希

在 output 配置中加入 [contenthash]：

module.exports = {
  output: {
    filename: '[name].[contenthash].js', // 生成带有哈希值的文件名
  },
};

这样，每次构建后，Webpack 生成的文件名都会改变，确保浏览器加载最新版本的代码。

4清理旧资源（Cleanup of Old Assets）

为了避免所有文件都被重复压缩，应当在每次构建前清理旧的打包文件，确保项目结构保持干净。

如何清理旧的构建文件

安装 CleanWebpackPlugin

npm install clean-webpack-plugin --save-dev

在 Webpack 配置文件中添加插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [new CleanWebpackPlugin()], // 每次构建前清理 dist 目录
};

这样，每次执行 webpack 时，dist 目录都会被清理，避免无用文件堆积。

总结

在本视频中，您学习了：

Webpack 生产模式 提供了一系列优化功能，帮助网站在生产环境中更高效运行。
CSS 压缩 通过移除空格、注释等减少 CSS 文件大小，提升加载速度。
Source Maps 允许开发者回溯压缩代码，提高调试效率。
文件哈希 通过生成带有哈希值的文件，确保浏览器始终加载最新资源，同时优化缓存。
清理旧资源 避免构建过程中累积无用文件，提高构建效率。

通过应用这些 Webpack 生产模式的最佳实践，您的网站将在 性能、缓存管理、代码优化 等方面得到显著提升！🚀