https://linsk27.dpdns.org/tags/webpack/ Recent content in Webpack on 404_@林达 Hugo -- gohugo.io zh-cn 404_@林达 Fri, 21 Mar 2025 11:49:00 +0800 https://linsk27.dpdns.org/p/0321-webpack%E5%88%9D%E6%AD%A5%E6%8E%A5%E8%A7%A6/ Fri, 21 Mar 2025 11:49:00 +0800 https://linsk27.dpdns.org/p/0321-webpack%E5%88%9D%E6%AD%A5%E6%8E%A5%E8%A7%A6/ <img src="https://linsk27.dpdns.org/p/0321-webpack%E5%88%9D%E6%AD%A5%E6%8E%A5%E8%A7%A6/webpack.png" alt="Featured image of post Webpack初步接触" /><h1 id="webpack-初步接触">Webpack 初步接触 </h1><h2 id="一什么是-webpack">一、什么是 Webpack？ </h2><p><strong>Webpack</strong> 是一个 <strong>静态模块打包工具</strong>，用于将多个模块、文件和资源进行打包，以便在浏览器中高效加载和运行。</p> <h3 id="核心功能">核心功能： </h3><ol> <li><strong>模块打包</strong><br> 整合 JS、CSS、图片等资源，提升代码可维护性和复用性。</li> <li><strong>依赖管理</strong><br> 自动解析模块依赖关系，确保正确加载顺序，降低手动管理复杂度。</li> <li><strong>代码转换与优化</strong><br> 通过 Loaders 转换代码（如 ES6 → ES5），并优化输出体积。</li> <li><strong>开发支持</strong><br> 支持 HMR（热更新）、Source Maps 调试、代码分割等，提升开发效率。</li> <li><strong>生态系统</strong><br> 丰富的插件（Plugins）和加载器（Loaders）扩展功能。</li> </ol> <hr> <h2 id="二webpack-构建流程">二、Webpack 构建流程 </h2><p>构建过程是<strong>串行</strong>的，主要分为以下阶段：</p> <ol> <li><strong>初始化参数</strong><br> 合并配置文件与命令行参数，生成最终配置。</li> <li><strong>启动编译</strong><br> 初始化 <code>Compiler</code> 对象，加载插件并调用 <code>run</code> 方法。</li> <li><strong>确定入口</strong><br> 根据 <code>entry</code> 配置定位所有入口文件。</li> <li><strong>编译模块</strong><br> 递归处理模块依赖： <ul> <li>调用 Loaders 转换文件内容（如编译 Sass → CSS）</li> <li>解析模块依赖关系，直至所有模块处理完成。</li> </ul> </li> <li><strong>输出资源</strong><br> 将模块组合为 <strong>Chunk</strong>，生成最终文件（如 JS/CSS 文件）。</li> <li><strong>写入文件系统</strong><br> 根据 <code>output</code> 配置输出文件到指定路径。</li> </ol> <h3 id="插件机制">插件机制 </h3><p>Webpack 在构建生命周期广播事件（如 <code>compile</code>、<code>emit</code>），插件通过监听事件调用 API 修改输出结果。</p> <hr> <h2 id="三常见-loaders">三、常见 Loaders </h2><table> <thead> <tr> <th>Loader</th> <th>功能描述</th> </tr> </thead> <tbody> <tr> <td><code>raw-loader</code></td> <td>导入文件原始内容（如文本文件）。</td> </tr> <tr> <td><code>file-loader</code></td> <td>将文件输出到指定目录，返回 URL 路径。</td> </tr> <tr> <td><code>url-loader</code></td> <td>小于阈值的文件转为 Base64，否则调用 <code>file-loader</code>。</td> </tr> <tr> <td><code>babel-loader</code></td> <td>转换 ES6+ 代码为向后兼容的 JavaScript。</td> </tr> <tr> <td><code>ts-loader</code></td> <td>编译 TypeScript 为 JavaScript。</td> </tr> <tr> <td><code>sass-loader</code></td> <td>编译 Sass/SCSS 为 CSS。</td> </tr> <tr> <td><code>css-loader</code></td> <td>解析 CSS 文件中的 <code>@import</code> 和 <code>url()</code>。</td> </tr> <tr> <td><code>style-loader</code></td> <td>将 CSS 注入到 DOM 的 <code>&lt;style&gt;</code> 标签中。</td> </tr> <tr> <td><code>eslint-loader</code></td> <td>静态检查 JavaScript 代码规范。</td> </tr> <tr> <td><code>vue-loader</code></td> <td>处理 Vue 单文件组件（<code>.vue</code>）。</td> </tr> </tbody> </table> <hr> <h2 id="四常见-plugins">四、常见 Plugins </h2><table> <thead> <tr> <th>Plugin</th> <th>功能描述</th> </tr> </thead> <tbody> <tr> <td><code>DefinePlugin</code></td> <td>定义全局常量（如环境变量）。</td> </tr> <tr> <td><code>HtmlWebpackPlugin</code></td> <td>自动生成 HTML 文件并注入资源。</td> </tr> <tr> <td><code>MiniCssExtractPlugin</code></td> <td>将 CSS 提取为独立文件。</td> </tr> <tr> <td><code>UglifyJsPlugin</code></td> <td>压缩 JavaScript 代码。</td> </tr> <tr> <td><code>CleanWebpackPlugin</code></td> <td>构建前清理输出目录。</td> </tr> <tr> <td><code>WebpackBundleAnalyzer</code></td> <td>可视化分析打包体积。</td> </tr> <tr> <td><code>SpeedMeasurePlugin</code></td> <td>统计各 Loader/Plugin 的构建耗时。</td> </tr> </tbody> </table> <hr> <h2 id="五loader-与-plugin-的区别">五、Loader 与 Plugin 的区别 </h2><table> <thead> <tr> <th>特性</th> <th>Loader</th> <th>Plugin</th> </tr> </thead> <tbody> <tr> <td><strong>核心功能</strong></td> <td>转换特定类型文件（如编译 Sass）。</td> <td>扩展 Webpack 功能（如代码压缩、资源注入）。</td> </tr> <tr> <td><strong>使用场景</strong></td> <td>处理单个文件的转换逻辑。</td> <td>监听构建事件，执行全局操作。</td> </tr> <tr> <td><strong>配置方式</strong></td> <td>在 <code>module.rules</code> 中定义，按文件类型匹配。</td> <td>在 <code>plugins</code> 数组中实例化，可传入参数。</td> </tr> <tr> <td><strong>实现原理</strong></td> <td>基于函数链式调用处理文件内容。</td> <td>基于 Tapable 事件流，在生命周期钩子中干预构建。</td> </tr> </tbody> </table>