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

原创 于 2025-08-19 14:18:06 发布 · 434 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Webpack 5 #构建工具 #CSS 处理 #前端工程化

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 = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

Webpack 5 引入了资源模块(asset modules)，可以替代 file-loader 和 url-loader。

五、使用插件增强功能

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

module.exports = {
  // ...其他配置
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html'
    }),
  ],
};
  • CleanWebpackPlugin：在每次构建前清理输出目录
  • HtmlWebpackPlugin：自动生成 HTML 文件并注入打包后的资源

六、开发环境配置

为了提高开发体验，我们需要配置开发服务器和 source map：

module.exports = {
  // ...其他配置
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};

然后安装 webpack-dev-server：

npm install --save-dev webpack-dev-server

在 package.json 中添加脚本：

"scripts": {
  "start": "webpack serve --open"
}

七、生产环境优化

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
};
  • TerserPlugin：压缩 JavaScript
  • CssMinimizerPlugin：压缩 CSS
  • splitChunks：代码分割，提取公共依赖

八、高级配置技巧

8.1 环境变量配置

我们可以区分开发和生产环境：

const webpack = require('webpack');

module.exports = (env) => {
  return {
    // ...其他配置
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env.production ? 'production' : 'development')
      }),
    ],
  };
};

8.2 多页面应用配置

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/pageOne/index.html',
      filename: 'pageOne.html',
      chunks: ['pageOne']
    }),
    new HtmlWebpackPlugin({
      template: './src/pageTwo/index.html',
      filename: 'pageTwo.html',
      chunks: ['pageTwo']
    }),
  ],
};

8.3 自定义 loader 和插件

创建自定义 loader：

// my-loader.js
module.exports = function(source) {
  return source.replace('World', 'Webpack');
};

创建自定义插件：

// my-plugin.js
class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', (stats) => {
      console.log('编译完成!');
    });
  }
}

module.exports = MyPlugin;

九、Webpack 5 新特性

  1. 持久化缓存：显著提高构建速度

     module.exports = {
  cache: {
    type: 'filesystem',
  },
};

  2. 资源模块：内置处理资源文件的能力，不再需要 file-loader 等

  3. 模块联邦：实现微前端架构

     // 作为远程模块
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/Button',
  },
});

// 作为主机使用远程模块
new ModuleFederationPlugin({
  name: 'app2',
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js',
  },
});

  4. Tree Shaking 改进：更好地消除未使用代码

  5. 长期缓存改进：通过确定的 chunk、模块 ID 和导出名称实现

十、性能优化

10.1 构建速度优化

module.exports = {
  // ...其他配置
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

10.2 输出文件优化

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

使用 contenthash 可以实现长期缓存，只有文件内容变化时 hash 才会改变。

10.3 代码分割

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
    runtimeChunk: 'single',
  },
};

十一、常见问题解决方案

  1. 处理路径问题

     module.exports = {
  resolve: {
    alias: {
      Assets: path.resolve(__dirname, 'src/assets/')
    }
  }
};

  2. 处理 polyfill
    Webpack 5 不再自动包含 Node.js 核心模块的 polyfill，需要手动添加：

     module.exports = {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "assert": require.resolve("assert"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "os": require.resolve("os-browserify"),
      "url": require.resolve("url"),
      "buffer": require.resolve("buffer"),
    }
  }
};

  3. 处理大型项目构建慢的问题

    • 使用 thread-loader 并行处理
    • 使用 cache-loader 缓存 loader 结果
    • 使用 DLLPlugin 预编译不常变化的模块

十二、完整配置示例

最后，我们来看一个完整的 webpack 配置示例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = (env) => {
  const isProduction = env.production;

  return {
    entry: './src/index.js',
    output: {
      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
    },
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: 'babel-loader',
        },
        {
          test: /\.css$/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'postcss-loader',
          ],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'images/[hash][ext][query]',
          },
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[hash][ext][query]',
          },
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: isProduction ? {
          collapseWhitespace: true,
          removeComments: true,
        } : false,
      }),
      isProduction && new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css',
      }),
    ].filter(Boolean),
    optimization: {
      minimizer: [
        new TerserPlugin(),
        new CssMinimizerPlugin(),
      ],
      splitChunks: {
        chunks: 'all',
      },
      runtimeChunk: 'single',
    },
    devServer: {
      contentBase: './dist',
      hot: true,
      historyApiFallback: true,
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      alias: {
        '@': path.resolve(__dirname, 'src/'),
      },
    },
    performance: {
      hints: isProduction ? 'warning' : false,
    },
    cache: {
      type: 'filesystem',
    },
  };
};

Webpack 5 的配置不是「越复杂越好」，而是「按需组合」。先跑通最小配置，再逐步叠加功能，配合持久化缓存和合理拆分，可以把冷启动时间从分钟级降到秒级。祝构建愉快！

前端性能分析工具全面指南：从入门到精通
嗨，欢迎来到我的 CSDN 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
04-14 1万+
前端性能分析工具全面指南：从入门到精通
Webpack 5 实战指南：从入门到精通
m0_61367745的博客
01-03 374
这篇文章将帮助你深入理解 Webpack 5 的核心概念和实战技巧，包含大量实用示例和性能优化方案。
Webpack 配置详解：从入门到精通的全面指南
天涯学馆
06-10 610
作为现代前端开发的核心工具之一，Webpack 以其强大的模块打包能力和灵活的配置体系，成为了无数开发者的首选。然而，Webpack 的复杂性和高度可定制化也让许多初学者望而却步，甚至让有经验的开发者在面对复杂场景时感到困惑。
Webpack核心概念全景指南：从入门到精通
王二的博客
08-07 713
Webpack作为现代前端开发的核心工具，能够有效解决模块化开发、资源优化和代码转换等关键问题。本文系统介绍了Webpack的核心概念、环境搭建、基础配置、Loader处理、Plugin应用和高级优化技巧。主要内容包括：Webpack的模块化打包本质，Node.js环境配置，多入口和开发服务器设置，各类资源Loader的对比与实现，核心插件（HtmlWebpackPlugin、MiniCssExtractPlugin等）的应用，以及HMR热更新和Source Map策略等高级特性。通过模块化示例和配置代码，
Webpack 实战指南：从入门到精通
gitblog_00444的博客
09-15 839
Webpack 实战指南：从入门到精通 项目介绍 "Webpack by sample" 是一个旨在通过实际示例帮助开发者学习 Webpack 的开源项目。每个示例都包含一个详细的 readme.md 文件，解释了示例的目的，并提供了一个逐步指南，帮助你重现该示例。无论你是 Webpack 的新手还是有经验的开发者，这个项目都能帮助你深入理解 Webpack 的工作原理和最佳实...
Vue.js 完全指南：从入门到精通
imlsp12356的博客
07-29 874
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他大型框架不同，Vue 被设计为可以逐步采用 —— 你可以只使用它的核心库（视图层），也可以结合其生态系统（路由、状态管理等）构建复杂应用。响应式数据绑定组件化开发虚拟 DOM指令系统过渡动画系统Vue.js 凭借其易学易用、灵活高效的特点，成为前端开发的首选框架之一。从简单的交互组件到复杂的单页应用，Vue 都能胜任。
前端工程化：Webpack从入门到精通
exlink2012的专栏
07-07 426
本文系统介绍了Webpack打包工具的核心知识体系，主要内容包括：Webpack的基本概念与配置方法、核心功能模块（入口、输出、模式等）、Loader与Plugin的使用详解、代码分割与懒加载实现、性能优化策略以及开发/生产环境配置。文章通过代码示例和配置说明，展示了Webpack在模块化开发、资源处理、性能优化等方面的强大功能，并对比了不同构建工具的特点，为开发者提供了从基础到进阶的Webpack实践指南。
Spring MVC 实用指南：从入门到精通
weixin_31715353的博客
11-11 1136
本文还有配套的精品资源，点击获取 简介：Spring MVC 是一个高效的Java Web框架，利用MVC设计模式，便于构建可维护且高性能的Web应用。本手册深入解析Spring MVC的安装配置、控制器设计、视图解析、数据绑定、异常处理等关键概念，并涵盖RESTful API设计、文件处理、国际化等多个高级主题，提供从基础知识到高级应用的完整指导。 1. Sprin...
前端缓存策略优化指南：从入门到精通
AI架构全栈开发实战笔记
06-19 1015
本文旨在全面介绍前端缓存的各种技术方案，帮助开发者理解缓存机制，并学会在实际项目中应用合适的缓存策略。内容涵盖从基础的HTTP缓存到现代的Service Worker缓存，以及CDN缓存等高级主题。文章将从基础概念开始，逐步深入探讨各种缓存技术，最后通过实际案例展示如何综合应用这些技术。每个部分都包含理论解释和实际代码示例。缓存：临时存储资源副本以加快后续访问速度的技术命中率：缓存满足请求的比例，衡量缓存效果的重要指标新鲜度：缓存内容与原始资源的一致程度核心概念回顾：浏览器缓存：自动管理的资源存储。
后端开发学习指南：从入门到精通的路径规划
04-28
### 后端开发学习指南：从入门到精通的路径规划 #### 一、基础编程语言 在后端开发中，选择合适的编程语言是至关重要的第一步。以下几种编程语言被广泛应用于后端开发： 1. **Java**：Java 是一种跨平台的面向...
Vue+Webpack项目调试指南：从入门到精通
通过全局安装`vue-cli`，然后运行`vue init webpack my-project`，即可创建一个包含Webpack配置的项目。Vue CLI生成的项目结构中，`webpack.dev.conf.js`用于开发环境，而`webpack.prod.conf.js`则用于生产环境。...
Webpack基础配置指南：入门到精通
npm是Node.js的包管理器，Webpack配置中通常会涉及到安装各种npm包作为依赖。比如，使用`npm init`来初始化一个新的npm包，然后使用`npm install`来安装所需的Webpack及其插件、加载器等。 ### Webpack配置的简易...
Webpack5入门到精通：从基础到高级实战
"这是一份关于Webpack5的学习指南，由千锋教育的古艺散人讲师主讲。课程旨在帮助学员理解并掌握Webpack的基础及高级应用，包括Webpack在解决前端开发中的作用域、代码拆分、模块支持等问题，以及如何配置和使用...
webpack4.0实战指南：入门到精通
- **零配置（Zero-Config）**：在某些场景下，Webpack 4 可以默认提供基础配置，减少新手的入门难度。 - **更快的速度**：通过优化内部算法，Webpack 4 在构建速度上有显著提升，尤其是在生产环境构建时。 - **更好...
rust-std-static-1.54.0-3.module_el8.5.0+1023+0c63d3d6.tar.gz
08-18
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
获取本机公网IP发送到飞书群脚本
08-18
#获取本机公网IP发送到飞书群 #需要安装jq软件 #需要创建一个飞书群的机器人
SimulinkSF平台下纯电动+四档变速箱动力性与经济性仿真模型及其应用 · 电动汽车 完整版
最新发布
08-18
内容概要：本文介绍了一个基于Simulink/SF平台开发的纯电动加四档变速箱的仿真模型。该模型旨在通过对电动汽车的驱动力和能耗进行精确数据分析，为设计和优化提供参考。文中详细描述了VCU控制模型和换档控制模型的功能，这两个模型分别负责车辆的动力性控制和换档操作，确保汽车在不同速度和负载下获得最佳性能。此外，还涵盖了动力性与经济性仿真的具体应用场景，如最高车速、最大爬坡度、加速时间和能耗续航等方面的模拟。最后，提供了详细的建模及使用说明文档，方便初学者理解和使用。 适合人群：从事新能源汽车研发的专业人士、研究人员及高校相关专业师生。 使用场景及目标：适用于电动汽车的设计与优化，帮助理解车辆性能并为后续改进提供依据。也可作为教学工具，帮助学生掌握电动汽车核心技术。 其他说明：未来将继续优化此模型，以更好地支持新能源汽车的发展。
【超表面】基于matlab生成超表面布局并模拟超透镜作为点源的叠加【含Matlab源码 13984期】.zip
08-18
Matlab领域上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
西门子S1200与霍尼韦尔电动比例阀PID控制恒温恒压供冷却水系统方案及Eplan电气图纸详解 工业自动化 高效版
08-18
内容概要：本文介绍了基于西门子S1200P ID和霍尼韦尔电动比例阀的PID控制系统，旨在实现冷却水的恒温恒压供应。文中详细解释了系统的工作原理，包括PID控制算法的应用、霍尼韦尔电动比例阀对水温的调控机制、两台西门子V20变频器对水压的调控机制，以及整个系统的代码分析框架和Eplan电气图纸的作用。此外，还探讨了该系统在提高生产效率、质量和降低成本方面的好处。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些负责冷却水系统的设计、安装和维护的专业人士。 使用场景及目标：适用于需要精确控制冷却水温度和压力的工业环境，如制造业工厂、化工厂等。目标是确保冷却水系统稳定运行，提升生产效率并节约能源。 其他说明：文中提到的具体代码未公开，但提供了详细的代码分析框架，帮助读者理解和实现类似系统。Eplan电气图纸则有助于更好地理解系统架构和维护方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端人类学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值