Webpack是什么？前端资源打包教程
2026-05-11 14:34:54
0浏览
收藏
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 语法转成 ES5css-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 字符串插入到页面的
