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 中的