Webpack 5 配置完全指南：从入门到精通

Hi，我是前端人类学（之前叫布兰妮甜）！
Webpack 是现代前端开发中不可或缺的模块打包工具，它的强大功能和灵活性使其成为构建复杂前端应用的首选。本文将深入探讨 Webpack 5 的配置细节，带你从基础配置到高级优化，全面掌握 Webpack 5 的使用技巧。

一、环境准备与核心概念

1.1. 安装

  npm i -D webpack webpack-cli webpack-dev-server@latest

1.2 核心概念

1. 入口(Entry)：指定 webpack 从哪个模块开始构建依赖图
2. 输出(Output)：告诉 webpack 在哪里输出它创建的 bundle 文件
3. 加载器(Loader)：让 webpack 能够处理非 JavaScript 文件「翻译官」
4. 插件(Plugins)：执行范围更广的任务，从打包优化到资源管理「任务管家」
5. 模式(Mode)：可以设置为 development、production 或 none

二、基础配置

// webpack.config.js

const path = require('path');

module.exports = {
   
   
  entry: './src/index.js',
  output: {
   
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true  // 5.20+ 自动清空 dist
  },
  mode: 'development'
};

这个配置告诉 webpack：

• 从 src/index.js 开始打包
• 输出到 dist/main.js
• 使用开发模式（不压缩代码，有 source map 等）

三、入口/出口（entry/output）深度解析

1. 多入口

   entry: {
        
        
     home: './src/home.js',
     about: './src/about.js',
   }
   

2. 输出占位符 [name] [contenthash:8] [fullhash] [id]

   output: {
        
        
     filename: 'js/[name].[contenthash:8].js',
     assetModuleFilename: 'assets/[name].[hash][ext]', // 图片/字体统一路径
   }
   

四、处理不同类型的资源

4.1 JS/TS

npm i -D babel-loader @babel/core @babel/preset-env core-js@3

{
   
   
  test: /\.[jt]sx?$/,
  exclude: /node_modules/,
  use: {
   
   
    loader: 'babel-loader',
    options: {
   
   
      presets: [
        ['@babel/preset-env', {
   
    useBuiltIns: 'usage', corejs: 3 }],
        '@babel/preset-typescript',
        ['@babel/preset-react', {
   
    runtime: 'automatic' }],
      ],
    },
  },
},

4.2 CSS/LESS/Sass

npm i -D css-loader mini-css-extract-plugin postcss-loader autoprefixer cssnano

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
{
   
   
  test: /\.s?css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
   
   
      loader: 'postcss-loader',
      options: {
   
   
        postcssOptions: {
   
   
          plugins: ['autoprefixer', ...(process.env.NODE_ENV === 'production' ? ['cssnano'] : [])],
        },
      },
    },
    'sass-loader',
  ],
},
plugins: [
  new MiniCssExtractPlugin({
   
    filename: 'css/[name].[contenthash:8].css' }),
],

这里我们使用了四个 loader：

• css-loader
  • 作用：解析 CSS 文件中的 @import 和 url() 等引用
  • 功能：处理 CSS 模块之间的依赖关系，将 CSS 转换为 JavaScript 模块
• postcss-loader
  • 作用：通过 PostCSS 处理 CSS 代码
  • 功能：
    • 使用 autoprefixer 插件为 CSS 属性添加浏览器厂商前缀
    • 在生产环境(NODE_ENV === 'production')下使用 cssnano 插件压缩和优化 CSS
• MiniCssExtractPlugin.loader
  • 作用：将 CSS 从 JavaScript bundle 中提取到单独的 CSS 文件
  • 功能：替代了 style-loader，用于生产环境优化
• sass-loader
  • 作用：将 Sass/SCSS 文件编译为 CSS
  • 功能：支持使用 Sass 语法编写样式文件

这四个 loader 共同构成了完整的 CSS 处理链，从 Sass 编译到 CSS 提取和优化。

4.3 图片/字体/资源

module.exports = {