当前位置：首页 > news >正文

Webpack常见配置实例

news 2026/2/7 14:25:45

webpack实例

打包构建流程对应的常见配置

    1. mode: 'development'2. entry: './src/index.js'3. output4. module.rules5. Loader6. Plugin7. devServer

webpack.config.js

webpack常见配置实例

配置详解

mode: ‘development’:
设置 Webpack 运行模式，可以是 development（开发模式）或 production（生产模式）。开发模式下代码不压缩，生产模式下会启用优化。

entry: ‘./src/index.js’:
配置 Webpack 的入口文件，打包从此文件开始。

output:
配置打包后的文件输出位置和名称。path.resolve 用于获取绝对路径，filename 用于设置输出的文件名。

module.rules:
配置各类文件的处理规则。test 属性用于匹配文件类型，use 属性指定使用的 Loader。

Loader 使用:
babel-loader 处理 JavaScript 文件，将 ES6+ 代码转换为 ES5。
css-loader 和 sass-loader 处理 CSS 和 SCSS 文件，MiniCssExtractPlugin.loader 将 CSS 提取为单独文件。
url-loader 处理图片文件，8KB 以下的图片转为 base64，大于 8KB 的图片则拷贝到输出目录。
自定义 my-loader.js 用于处理自定义文件。

Plugin 使用:
CleanWebpackPlugin 在每次打包前清理 dist 目录。
HtmlWebpackPlugin 根据模板生成 HTML 文件，并自动注入打包后的 JS 文件。
MiniCssExtractPlugin 将 CSS 提取到单独的文件中。
自定义 MyPlugin 在编译完成后输出提示信息。

devServer:
配置开发服务器，指定内容目录、是否启用 gzip 压缩以及端口号。

Loader 和 Plugin

    在 Webpack 中，Loader  和 Plugin 是两个非常重要的概念：

Loader 是用于转换模块的工具。例如，将 TypeScript 转换为 JavaScript，将 SCSS 转换为 CSS，或者将图片文件处理为可以导入的模块。Loader 主要用于文件内容的转换。

Plugin 是用于扩展 Webpack 功能的工具。它们可以在 Webpack 构建过程中执行更复杂的任务，如打包优化、资源管理、环境变量注入等。Plugin 主要用于处理构建过程中的各种任务。

常用的Loader和Plugin

    常用 Loader:babel-loader: 将 ES6+ 语法转换为兼容性更好的 ES5 语法，通常与 @babel/preset-env 一起使用。css-loader: 解析 CSS 文件中的 @import 和 url()，并将其转换为 JavaScript 可以处理的模块。style-loader: 将 CSS 插入到 DOM 中的 <style> 标签中。file-loader: 处理文件（如图片、字体），并返回文件的 URL。url-loader: 类似于 file-loader，但当文件小于某个限制时，可以将文件内容转化为 Data URL。sass-loader: 将 SCSS/SASS 文件编译为 CSS。ts-loader: 将 TypeScript 转换为 JavaScript。自定义 Loader: 可以根据需要编写自定义的 Loader，用于处理特定类型的文件。

常用 Plugin:
HtmlWebpackPlugin: 自动生成 HTML 文件，并自动注入打包后的资源（如 JS、CSS 文件）。
CleanWebpackPlugin: 在每次打包前清理输出目录，防止旧文件残留。
MiniCssExtractPlugin: 将 CSS 提取到单独的文件中，而不是内嵌在 JavaScript 中。
DefinePlugin: 创建全局常量，在编译时进行替换。
TerserPlugin: 用于压缩 JavaScript 代码，主要在生产环境中使用。

自定义Loader和Plugin

    自定义 Loader 和 Plugin 是 Webpack 的强大功能之一。它们允许我们实现更复杂的功能，如文件转换、代码生成等。自定义 Loader:Loader 实质上是一个函数，它接收源文件内容作为输入，并输出处理后的内容。可以通过 this.callback 返回结果。自定义 Plugin:Plugin 是一个类（ES6+），它包含 apply 方法。apply 方法接收一个 compiler 对象，通过这个对象你可以钩入 Webpack 的各个构建阶段。