从手写 script 标签到模块化构建，Webpack 是前端工程化的核心工具。本文带你理解它解决了什么问题。

一、为什么需要构建工具

  • 1.1 远古时代——全局脚本与命名冲突
  • 1.2 模块化——CommonJS / ES Module
  • 1.3 浏览器不认识 require / import
  • 1.4 Webpack 的角色——打包+转换

二、核心概念

  • 2.1 Entry——入口起点
  • 2.2 Output——输出配置
  • 2.3 Loader——文件转换器
  • 2.4 Plugin——功能扩展
  • 2.5 Mode——开发/生产模式

三、常用 Loader

  • 3.1 css-loader + style-loader——处理 CSS
  • 3.2 vue-loader——处理 .vue 文件
  • 3.3 babel-loader——ES6+ 转 ES5
  • 3.4 file-loader / url-loader——处理图片

四、开发服务器

  • 4.1 webpack-dev-server 配置
  • 4.2 热模块替换（HMR）
  • 4.3 Source Map——调试利器