前端开发深入了解webpack

什么是webpack

Webpack 是一个现代 JavaScript 应用程序的模块打包工具。它主要用于将各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。

Webpack 的核心功能包括：

1. 模块化：支持将代码拆分为模块，便于管理和重用。
2. 打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。
3. 加载器（Loaders）：处理不同类型的文件（如转换 ES6 到 ES5、编译 Sass 等）。
4. 插件（Plugins）：扩展功能，执行各种任务，例如代码压缩、环境变量管理等。
5. 热模块替换：在开发过程中实时更新模块，提升开发效率。

webpack编译原理（构建流程）

1. 初始化：读取配置文件（如webpack.config.js），初始化Compiler对象
2. 构建模块：解析入口文件，找到所有依赖模块
3. 编译模块：调用所有配置的loader对文件进行转换
4. 生成依赖图：生成所有模块的AST（抽象语法树），并提取依赖关系，生成依赖图
5. 完成编译模块并输出：根据entry配置（依赖图）生成代码块chunk（一个或多个打包文件）
6. 输出完成：输出所有的chunk到指定目录
7. 监听（可选）：在开发模式下，Webpack 可以监视文件变化，自动重新构建和刷新浏览器

loader和plugin的区别

loader

• 主要用于转换模块的内容
• 在构建过程中将文件从一种格式转换为另一种格式（如将ES6转换为ES5）
• 通过module.rules配置

plugin

• 用于扩展Webpack的功能，执行更广泛的任务
• 可以处理构建过程中的各种操作，如优化、压缩、生成文件等
• 通过plugins数组配置

总结：Loader处理单个文件的转换，Plugin用于整体构建过程的扩展和优化

常用的loader和plugin

loader

• babel-loader：将ES6/ES7代码转换为向后兼容的JavaScript
• css-loader：解析CSS文件中的@import和url()，使其能够被Webpack处理
• style-loader：将CSS插入到DOM中，通常与css-loader一起使用
• file-loader：处理文件导入，生成文件并返回其URL
• url-loader：类似于file-loader，但可以将小文件转换为Data URL
• sass-loader：将Sass/SCSS文件编译为CSS
• less-loader：将Less文件编译为CSS

plugin

• HtmlWebpackPlugin：动态生成HTML文件，并自动引入Webpack打包的资源
• MiniCssExtractPlugin：将CSS提取成单独的文件，而不是内联在JS中
• CleanWebpackPlugin：在每次构建前清理输出目录
• Webpack.DefinePlugin：定义全局常量，便于在代码中使用
• TerserWebpackPlugin：用于压缩JavaScript代码，优化性能
• OptimizeCSSAssetsPlugin：压缩和优化CSS文件
• CopyWebpackPlugin：将静态资源复制到输出目录

webpack处理跨域

通过代理的方式，在 webpack.config.js 中使用 devServer 的 proxy 配置

devServer: {
    proxy: {
        '/api': {
            target: 'http://backend-server.com',
            changeOrigin: true,
        },
    },
}