Webpack 命令速查
共 25 条 Webpack 常用命令与配置，覆盖常用命令、基础配置、Loader、Plugin、优化与 开发五组场景。支持搜索与分类筛选，点击即可复制。
常用命令
命令行基本用法。
| 命令 / 配置 | 说明 |
|---|---|
| 按默认配置（webpack.config.js）打包 | |
| 指定构建模式（development / production） | |
| 指定配置文件 | |
| 监听文件变化自动重新打包 | |
| 启动 dev-server 并自动打开浏览器 | |
| 导出构建分析数据（交给分析工具） |
基础配置
入口、出口与解析。
| 命令 / 配置 | 说明 |
|---|---|
| 打包入口 | |
| 输出目录与带内容哈希的文件名 | |
| 生产模式：自动开启压缩与优化 | |
| 生成 sourcemap 便于调试（生产可关闭） | |
| 模块解析规则与别名 |
Loader
把非 JS 资源转成模块。
| 命令 / 配置 | 说明 |
|---|---|
| 用 Babel 转译 JS / TS | |
| 处理 CSS 并把样式注入页面 | |
| 编译 Sass / Less | |
| Webpack 5 内置资源模块（替代 file/url-loader） | |
| 用 test 匹配文件、use 指定 loader |
Plugin
扩展构建流程。
| 命令 / 配置 | 说明 |
|---|---|
| 自动生成 HTML 并注入打包后的资源 | |
| 把 CSS 抽成独立文件（替代 style-loader） | |
| 编译时替换全局变量（如注入环境常量） | |
| 构建前清理输出目录 | |
| 可视化分析包体积构成 |
优化与开发
体积与开发体验。
| 命令 / 配置 | 说明 |
|---|---|
| 提取公共代码，避免重复打包 | |
| 开启持久化缓存，加速二次构建 | |
| 热更新、端口与接口代理 | |
| 把大依赖（如 React）排除，改由 CDN 引入 |
使用说明
Webpack 常用命令与配置速查：CLI、基础配置、Loader、Plugin 与优化；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：常用命令、基础配置、Loader、Plugin、优化与开发。
- 点「命令 / 配置」列复制，替换入口、输出路径与规则后填入 webpack.config.js。
- 分清两类扩展：Loader 处理「单个文件」的转换，Plugin 干预「整个构建流程」。
- 排查体积用 BundleAnalyzer；加速二次构建开 cache.filesystem。
常见问题
- Loader 和 Plugin 有什么区别？
- Loader 作用于单个模块文件（把 TS、CSS、图片等转成可打包的模块）；Plugin 作用于整个构建生命周期（生成 HTML、抽离 CSS、注入变量等）。
- file-loader / url-loader 还需要吗？
- Webpack 5 已内置资源模块（asset/resource、asset/inline 等），一般不再需要这两个 loader，用 rules 里的 type 字段即可。
- 构建很慢怎么优化？
- 开启 filesystem cache、缩小 loader 的匹配范围（test/include）、用 externals 把大依赖交给 CDN，并检查是否重复打包了公共代码。
- 文件名里的 contenthash 有什么用？
- 内容变化时哈希才变，浏览器可长期缓存未变文件、只重新下载变化的包，是生产构建的常见优化。