前端开发深入了解webpack

什么是webpack

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

Webpack 的核心功能包括：

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

webpack编译原理（构建流程）

常用的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,
        },
    },
}