Webpack 核心配置总结与补充

一、核心配置项

1. ​Entry（入口）​
   • ​作用：指定打包入口文件。
   • ​默认值：./src/index.js
   • ​配置形式：
     • ​字符串：单入口（默认）。
     • ​数组：多入口合并为一个输出文件（如 ["./src/a.js", "./src/b.js"]）。
     • ​对象：多入口生成多输出文件（键名为 chunk 名称，如 { app: "./src/app.js", vendor: "./src/vendor.js" }）。
2. ​Output（出口）​
   • ​作用：定义输出文件的位置和格式。
   • ​关键配置：
     • filename: "[name].js"
       • 动态生成文件名，[name] 对应 entry 对象的键名，支持哈希（如 [name].[contenthash:8].js）。
     • path: path.resolve(__dirname, "dist")
       • 输出目录（通常为 dist），需使用绝对路径。
     • libraryTarget: "umd"
       • 兼容多种模块系统（CommonJS/AMD/全局变量）。
     • library: "[name]"
       • 库的全局变量名（适用于库开发）。
3. ​Mode（模式）​
   • ​作用：指定构建环境优化策略。
   • ​可选值：
     • development：开启调试工具（如 source map），不压缩代码。
     • production：默认启用代码压缩、Tree Shaking 等优化。
   • ​注意：模式会隐式设置 process.env.NODE_ENV，可通过配置文件覆盖。
4. ​Externals（外部扩展）​
   • ​作用：排除第三方依赖，减小打包体积（依赖由外部环境提供）。
   • ​常见场景：库开发中声明 Vue、React 等为外部依赖。
   • ​配置示例：

     externals: {
       vue: {
         root: "Vue",          // 浏览器全局变量
         commonjs: "vue",      // CommonJS
         commonjs2: "vue",     // CommonJS2
         amd: "vue"            // AMD
       },
       lodash: "_"            // 直接映射到全局变量
     }

      

二、重要补充配置

1. ​Module（模块规则）​
   • ​Loader 配置：处理非 JS 文件（如 CSS、图片、字体）。

     module: {
       rules: [
         {
           test: /\.css$/,
           use: ["style-loader", "css-loader"] // 从右到左执行
         },
         {
           test: /\.(png|jpg)$/,
           type: "asset/resource" // Webpack 5+ 内置资源处理
         }
       ]
     }

      

2. Plugins（插件）​
   • ​常用插件：
     • HtmlWebpackPlugin：自动生成 HTML 并注入资源。
     • CleanWebpackPlugin：构建前清理输出目录。
     • MiniCssExtractPlugin：提取 CSS 为独立文件。
     • DefinePlugin：定义全局常量（如 process.env.NODE_ENV）。
3. ​DevServer（开发服务器）​
   • ​配置示例：

     devServer: {
       static: "./dist",
       hot: true,          // 热更新
       port: 8080,
       historyApiFallback: true // 解决 SPA 路由 404 问题
     }

      

4. 优化配置（Optimization）​
   • ​代码分割：

     optimization: {
       splitChunks: {
         chunks: "all",     // 分离公共依赖
         cacheGroups: {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name: "vendors"
           }
         }
       }
     }

      

5. Resolve（路径解析）​
   • ​简化导入路径：

     resolve: {
       extensions: [".js", ".vue"], // 自动补全扩展名
       alias: {
         "@": path.resolve(__dirname, "src/") // 路径别名
       }
     }

      

三、高频问题补充

1. ​Webpack 构建流程：
   • 初始化参数 → 开始编译 → 解析模块 → 编译模块 → 输出资源。
2. ​Loader 和 Plugin 的区别：
   • ​Loader：文件转换器（如 Sass → CSS）。
   • ​Plugin：扩展功能（如优化、资源管理）。
3. ​Tree Shaking 原理：
   • 通过 ES Module 静态分析消除未使用代码，需配合 sideEffects 配置。
4. ​Source Map 配置：
   • devtool: "source-map"（生产环境建议 hidden-source-map）。
5. ​性能优化手段：
   • 缓存（Loader 的 cache 选项、cache-loader）。
   • 多线程（thread-loader）。
   • DLL 分包（预编译不常变更的依赖）。