本文已收录在Github，关注我，紧跟本系列专栏文章，咱们下篇再续！
🚀 魔都架构师 | 全网30W技术追随者
🔧 大厂分布式系统/数据中台实战专家
🏆 主导交易系统百万级流量调优 & 车联网平台架构
🧠 AIGC应用开发先行者 | 区块链落地实践者
🌍 以技术驱动创新，我们的征途是改变世界！
👉 实战干货：编程严选网
0 前言
Webpack 是一个强大的 JavaScript 模块打包工具，广泛用于前端开发。它可以将多个 JavaScript 文件、CSS、图片等资源打包成一个或多个 bundle 文件，方便在浏览器中使用。对于从 Java 开发转向前端开发的开发者来说，理解和掌握 Webpack 是迈入前端领域的关键一步。本文将详细介绍 Webpack 的基本配置、核心 loader、常用命令以及开发服务器的使用方法，帮助 Java 开发者快速上手。
1 webpack.config.js 配置文件
Webpack 的核心配置文件通常命名为 webpack.config.js，它是一个 Node.js 模块，导出一个配置对象。以下是配置文件中常见的选项及其作用：
entry：指定打包的入口文件，可以是单个 JavaScript 文件或多个文件的对象。
externals：声明外部依赖，告诉 Webpack 这些依赖不需要打包（例如通过 CDN 引入的库）。
output：定义打包后的输出文件，包括文件名和存储路径。
resolve：配置模块解析方式，例如设置文件路径别名。
module：配置处理各种文件类型的 loader。
plugins：配置使用的插件，增强 Webpack 功能。
示例配置
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出路径
},
module: {
rules: [
// loader 配置
]
},
plugins: [
// 插件配置
]
};
2 Webpack Loaders（最重要部分）
Loader 是 Webpack 的核心功能之一，用于处理不同类型的文件（如 JavaScript、CSS、图片等），将其转换为浏览器可识别的格式。以下是常见的 loader 及其用途：
HTML
html-webpack-plugin：自动生成 HTML 文件，并将打包后的资源（如 JS 文件）注入其中。
html-loader：处理 HTML 文件中的资源引用（如 标签中的图片路径）。
JavaScript
babel-loader + babel-preset-es2015：将现代 ES6+ 代码转换为 ES5，确保兼容旧浏览器。
CSS
style-loader + css-loader：css-loader 解析 CSS 文件，style-loader 将 CSS 注入到页面的