Webpack打包

原创于 2025-11-24 16:47:08 发布 · 595 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#webpack #前端

前端专栏收录该内容

42 篇文章

订阅专栏

前端工程化

「资源处理 + 打包整合」，将开发时的 “非标准文件” 转为浏览器能直接解析的 “标准静态文件(js/html/css/图片)”，最终协同渲染出完整网页。

https://webpack.docschina.org/

webpack配置文件

webpack配置文件包括entry/output/module/plugin/optimization
核心流程：入口文件 → 递归解析依赖（AST 分析）→ 模块转换（Loader）→ 资源优化（Plugin）→ 输出打包结果

loader模块转换器：将非JS模块转换为JS模块

babel-loader会调用babel将高阶js(ES6+)转换为低阶js(ES5)，让各种版本的浏览器都能够识别。

    module: {
        rules: [
        		// 1. 拆分 .vue 三部分:template模板、script脚本、style样式
            { test: /\.vue$/, loader: 'vue-loader'},                                    
            // 2. 处理脚本部分（.js/.jsx）：交给 babel-loader 转译
            { test: /(\.jsx|\.js)$/,  use: "babel-loader", exclude: /node_modules/ },   
            //3. 处理样式部分（.css）：配合 vue-loader 处理style
            { test: /\.css$/, use: ["style-loader", "css-loader"], exclude: /node_modules/}, 				     
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], exclude: /node_modules/},
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: /node_modules/},
            //图片webpack 5之前用file-loader
            { test: /\.(jpg|jpeg|png|gif|ico)$/,
                loader: "file-loader",
                options: {
                    outputPath: './images'
                }
            },
            //图片webpack 5用type: "asset"
            //对于小图片，会转换为base64直接插入到打包后的文件中
            //对于大图片，单独的图片打包，形成url地址，单独请求这个url图片
            { test: /\.(jpg|jpeg|png|gif|ico)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 64 * 1024
                    }
                },
                //保留原始图片名加上hash前8位和后缀
                generator:{
                    filename: "images/[name]_[hash:8][ext]"
                }
            },
        ]
    },

babel

js语法编译器，能将高级js语法ES6+, ts, tsx, jsx, vue转译为低版本的ES5语法,兼容不同的环境。可独立运行(终端/Node)，无需webpack。

        # 安装核心依赖
        npm i @babel/core @babel/cli @babel/preset-env -D
        # 直接转译 src 目录下的 JS 文件，输出到 dist 目录
        npx babel src --out-dir dist --presets=@babel/preset-env

polyfill语法补全，补全低版本环境缺失的原生 API（如 Promise、Array.prototype.includes、Object.assign 等。
核心基础包：@babel/core, @babel/cli。
预设Preset: 多个插件的组合，避免手动配置大量插件，@babel/preset-env, @babel/preset-typescript等。
插件Plugin: 定制转译逻辑。
Babel 很少单独使用，通常与 Webpack、Vite、Vue CLI、Create React App 等工程化工具集成。

  // babel.config.js（Babel 自身配置）
  module.exports = {
      presets: [
          '@babel/preset-env', // 转译 ES6+ 语法
          '@babel/preset-react', // 转译 JSX
          '@babel/preset-typescript' // 转译 TS
          '@babel/preset-vue'   //转译Vue脚本，如script setup
      ]
  };

plugin 是 “扩展 Webpack 功能的通用工具”

plugin：全流程通用

打包前：清理输出目录（CleanWebpackPlugin）、注入环境变量（DefinePlugin）；
打包中：处理模块依赖（VueLoaderPlugin）、热模块替换（HotModuleReplacementPlugin）、CSS提取(MiniCssExtractPlugin)；
打包后：生成 HTML 文件（HtmlWebpackPlugin）、压缩图片（ImageMinimizerPlugin）