Webpack是什么？前端资源打包教程

Webpack 是一个专注于模块依赖解析与打包的静态模块打包器，它并非万能构建工具，而是通过可插拔的 loader（如 css-loader、style-loader）和 plugin（如 HtmlWebpackPlugin）灵活扩展能力，将 JavaScript、CSS、图片等前端资源按需转化为浏览器可运行的 bundle；文章以零基础视角拆解其核心原理——从三步搭建最小可用流程、理解 loader 执行顺序与必要性，到引入 webpack-dev-server 实现高效开发体验，并提醒读者关注 Webpack 5 的现代实践（如 asset module 替代旧 loader），帮助开发者摆脱配置迷思，真正掌握“打包调度中心”的设计逻辑与实用边界。

Webpack 是什么：前端资源的“打包调度中心”

Webpack 不是构建工具的代名词，也不是必须用的“标配”。它本质是一个静态模块打包器（static module bundler），核心任务是：从一个或多个入口文件（如 src/index.js）出发，递归解析所有 import、require、import() 甚至 CSS 中的 @import 和 HTML 中的 img src，把它们看作“模块”，最终输出一个或多个浏览器可直接运行的 bundle 文件。

它不直接处理“编译 JS”或“压缩图片”，而是靠插件（plugin）和加载器（loader）扩展能力。比如：

• babel-loader 负责把 ES2022 语法转成 ES5
• css-loader + style-loader 让 import './style.css' 可以工作
• HtmlWebpackPlugin 自动生成带正确 script 引用的 index.html

怎么初始化一个最小可用 Webpack 打包流程

不需要脚手架，三步搭出能跑的打包链路：

• 全局或项目本地安装：

  npm init -y && npm install --save-dev webpack webpack-cli

• 创建最简入口文件 src/index.js，内容为 console.log('hello webpack')
• 新建 webpack.config.js，写入基本配置：

  const path = require('path');

module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };

• 运行打包：

  npx webpack

  ，生成 dist/main.js

此时你还没加任何 loader，所以不能 import CSS 或 JSX —— 这不是 bug，是默认行为。

为什么 import CSS 会报错：loader 必须显式声明

Webpack 默认只理解 JavaScript 模块。当你写 import './style.css'，它会尝试把 CSS 当 JS 解析，于是报错：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

解决方式是配置两个 loader：

• css-loader：解析 CSS 中的 @import 和 url()，把 CSS 转成 JS 模块
• style-loader：把 CSS 字符串插入到页面 的