前端开发深入了解webpack
什么是webpack
Webpack 是一个现代 JavaScript 应用程序的模块打包工具。它主要用于将各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。
Webpack 的核心功能包括：
- 模块化：支持将代码拆分为模块，便于管理和重用。
- 打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。
- 加载器（Loaders）：处理不同类型的文件（如转换 ES6 到 ES5、编译 Sass 等）。
- 插件（Plugins）：扩展功能，执行各种任务，例如代码压缩、环境变量管理等。
- 热模块替换：在开发过程中实时更新模块，提升开发效率。
webpack编译原理（构建流程）
- 初始化：读取配置文件（如webpack.config.js），初始化Compiler对象
- 构建模块：解析入口文件，找到所有依赖模块
- 编译模块：调用所有配置的loader对文件进行转换
- 生成依赖图：生成所有模块的AST（抽象语法树），并提取依赖关系，生成依赖图
- 完成编译模块并输出：根据entry配置（依赖图）生成代码块chunk（一个或多个打包文件）
- 输出完成：输出所有的chunk到指定目录
- 监听（可选）：在开发模式下，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,},},
}