Webpack常见配置实例

webpack实例

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

    1. mode: 'development'​2. entry: './src/index.js'​3. output​4. module.rules​5. Loader​6. Plugin​7. 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 的各个构建阶段。