Webpack 的配置文件一般是一个 webpack.config.js 文件。这个文件可以导出一个 JavaScript 对象，其中包含多个配置项来定义 Webpack 的行为。本篇记录一下常见的配置项和它们的作用：
一、entry
入口点：Webpack 会从这个文件开始分析你的应用程序的依赖关系。可以是一个路径，也可以是一个对象（多入口点的情况）。
entry: './src/index.js', // 单个入口// 或者entry: {main: './src/index.js', // 主要入口vendor: './src/vendor.js' // 额外入口}二、output
定义打包后文件的输出位置和名称。
output: {path: __dirname + '/dist', // 输出文件存放的目录filename: '[name].bundle.js' // 输出文件的名称，`[name]` 为 entry 中的键
}三、loaders
Loaders 用于转换非 JavaScript 文件（如 CSS、图片、TypeScript 等）。它们通过规则（module.rules）指定如何处理特定类型的文件。
配置示例
module: {rules: [{test: /\.vue$/,loader: 'vue-loader',},{test: /\.(jpg|jpeg|png|gif|webp)$/i, // 处理图片格式use: [{loader: 'file-loader', // 使用 file-loader 处理图片options: {name: '[path][name].[ext]', // 可以设置输出的文件路径和文件名},},],},{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},},],
},在
webpack.config.js中，通过module.rules配置来指定哪些文件需要通过哪个 loader 来处理。每个规则（rule）通常包括以下字段：
test：一个正则表达式，用来匹配需要处理的文件类型。
use：指定使用哪个 loader，或者一个 loader 数组。
exclude：一个正则表达式，表示不处理哪些文件（通常用于排除node_modules文件夹）。
include：与exclude相反，表示只处理哪些文件，常用于指定文件夹或文件路径。
常见的 Loaders 配置项
1. Babel Loader（用于转译 JavaScript）
Babel 是一个非常流行的 JavaScript 编译器，用于将现代 JavaScript 代码转化为兼容较旧浏览器的代码。你可以通过 babel-loader 来处理 JavaScript 文件。
安装 Babel 相关依赖：
npm install --save-dev babel-loader @babel/core @babel/preset-envBabel 配置：
module: {rules: [{test: /\.js$/, // 匹配所有 JavaScript 文件exclude: /node_modules/, // 排除 node_modules 文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'] // 使用预设配置，转译为兼容目标浏览器的代码}}}]
}
2. CSS Loader 和 Style Loader（用于处理 CSS）
-
css-loader：用于解析和处理 CSS 文件中的@import和url()等语法，返回一个 JavaScript 对象。 -
style-loader：将 CSS 插入到页面的<style>标签中。
安装相关依赖：
npm install --save-dev css-loader style-loaderCSS 配置：
module: {rules: [{test: /\.css$/, // 匹配所有 CSS 文件use: ['style-loader', 'css-loader'] // 使用 style-loader 和 css-loader}]
}
3. SASS/SCSS Loader（用于处理 SASS 或 SCSS）
-
sass-loader：将 SASS 或 SCSS 转换为 CSS。
安装相关依赖：
npm install --save-dev sass-loader node-sass SASS/SCSS 配置：
module: {rules: [{test: /\.scss$/, // 匹配所有 SCSS 文件use: ['style-loader', // 将 CSS 插入到页面的 <style> 标签中'css-loader', // 解析 CSS 文件'sass-loader' // 将 SCSS 编译成 CSS]}]
}
4. File Loader 和 Url Loader（用于处理图片和文件）
-
file-loader：将文件打包成独立的文件，返回文件的路径。 -
url-loader：与file-loader类似，但当文件小于指定的限制时，文件内容会被转为 base64 格式的字符串内联到 JavaScript 中，减少 HTTP 请求。
安装相关依赖：
npm install --save-dev file-loader url-loader图片文件配置：
module: {rules: [{test: /\.(png|jpe?g|gif)$/, // 匹配图片文件use: [{loader: 'url-loader',options: {limit: 8192, // 文件小于 8KB 时转为 base64 格式name: 'images/[name].[hash:8].[ext]' // 输出路径和文件名}}]}]
}
5. HTML Loader（用于处理 HTML 文件）
html-loader 将 HTML 文件中的图片等静态资源转为 URL 并将其嵌入到打包后的 JavaScript 中。
安装相关依赖：
npm install --save-dev html-loaderHTML 配置：
module: {rules: [{test: /\.html$/, // 匹配 HTML 文件use: 'html-loader' // 使用 html-loader}]
}
6. Vue Loader（用于处理 Vue 单文件组件）
vue-loader 允许你在 Webpack 中使用 Vue 单文件组件（.vue 文件）。
安装相关依赖：
npm install --save-dev vue-loader vue-template-compilerVue 配置：
module: {rules: [{test: /\.vue$/, // 匹配 .vue 文件use: 'vue-loader' // 使用 vue-loader}]
}
Loader 使用顺序
Webpack 会按照从右到左或从下到上的顺序处理
use数组中的 loader。即：
从右到左：
use: ['babel-loader', 'ts-loader']会先用ts-loader处理 TypeScript，然后用babel-loader转译成 JavaScript。从下到上：
use: ['style-loader', 'css-loader']会先使用css-loader解析 CSS 文件，再用style-loader将其插入到 HTML 中。
四、plugins
插件可以扩展 Webpack 的功能，常用于优化构建过程、管理 HTML 文件、压缩代码等。
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/index.html' // 使用模板生成 HTML 文件})]
};
五、resolve
配置模块解析规则，例如如何解析模块路径。
resolve: {alias: {vue$: 'vue/dist/vue.esm.js','@': path.resolve(__dirname, 'src'), // 将 @ 映射到 src 目录},extensions: ['*', '.js', '.vue', '.json'],
},六、devtool
配置生成 Source Maps 的方式，方便调试代码。
module.exports = {devtool: 'source-map' // 生成完整的 source map
};
七、devServer
配置开发服务器，常用于本地开发时启动一个 Web 服务器。
devServer: {// contentBase: path.join(__dirname, 'dist'),static: path.join(__dirname, 'dist'),compress: true,port: 9000,// 处理 SPA 的路由，防止刷新页面时报 404 错误historyApiFallback: true, // 支持 HTML5 History API 路由// publicPath: '/',
},八、mode
Webpack 4 及以上版本支持 mode 配置，用于指定构建模式。可以是 development、production 或 none。
module.exports = {mode: 'development' // 使用开发模式
};
九、optimization
optimization 配置项提供了对构建输出的控制，主要用于优化生成的文件、提高加载性能、减少文件大小等。optimization 让我们可以控制如何对代码进行拆分、压缩、去重等操作，从而优化最终的打包结果。
配置示例
module.exports = {optimization: {splitChunks: {chunks: 'all' // 对所有模块进行代码拆分},minimize: true // 启用压缩}
};
配置项详解
1. 代码拆分（Code Splitting）
代码拆分是 Webpack 中优化的一项重要功能，它允许你将代码拆分成多个小的块，从而按需加载，提高性能。
Webpack 通过 splitChunks 配置项来定义如何拆分代码。拆分后的代码块可以按需加载，提高首屏加载速度。
module.exports = {optimization: {splitChunks: {chunks: 'all', // 拆分所有类型的模块（`initial`, `async`, `all`）minSize: 20000, // 最小块大小，单位字节，超过该值时会进行拆分maxSize: 0, // 块最大大小，设置为 0 不做限制minChunks: 1, // 该模块至少出现一次才会被拆分maxAsyncRequests: 30, // 异步加载文件的最大数量maxInitialRequests: 30, // 初始化加载文件的最大数量automaticNameDelimiter: '~', // 自动生成文件名时的分隔符name: true, // 是否自动生成文件名}}
};
splitChunks选项详解：
chunks: 控制拆分哪些类型的模块：
'initial'：拆分初始化加载的模块。
'async'：拆分异步加载的模块（动态import）。
'all'：拆分所有模块。
minSize: 拆分出来的文件的最小大小，文件小于该值时不会被拆分。
maxSize: 生成的块的最大大小。设置为0则不限制大小。
minChunks: 一个模块在拆分时，至少需要被多少个入口文件共享才会被拆分。可以设置为2，表示只有被多个文件使用的模块才会被拆分。
maxAsyncRequests和maxInitialRequests：限制了异步加载和初始化加载时，最大请求数。如果超过该值，WebPack 会合并部分文件来减少请求数。
automaticNameDelimiter: 生成文件名时的分隔符。
name: 是否启用根据chunks的名称来自动生成文件名称。
2. 压缩（Minification）
压缩可以减小代码体积，WebPack 提供了内置的压缩插件以及与第三方插件配合使用的方式。
开启压缩功能，默认情况下，Webpack 在生产环境中会自动启用代码压缩。
module.exports = {optimization: {minimize: true // 开启压缩}
};
TerserPlugin（默认压缩工具）
WebPack 5 默认使用 TerserPlugin 进行 JavaScript 代码压缩。Terser 会通过删除注释、空白符、简化表达式等方式减小文件体积。
const TerserPlugin = require('terser-webpack-plugin');module.exports = {optimization: {minimize: true, // 开启压缩minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true // 去除 console.log},output: {comments: false // 去掉注释}}})]}
};
3. Tree Shaking
Tree Shaking 是 Webpack 的一种优化机制，旨在通过去除未使用的代码来减少打包文件的体积。这是基于 ES6 的模块化（import / export）的静态特性来实现的。
Tree Shaking 是 Webpack 的默认功能，只要你遵循 ES6 模块的语法，Webpack 会自动进行Tree Shaking。
module.exports = {mode: 'production', // Tree shaking 仅在生产环境下启用optimization: {usedExports: true // 告诉 Webpack 只保留实际使用的导出}
};
Tree Shaking 会去除你代码中未使用的导出，最终减小打包文件的大小。例如，你引入一个大库，但只使用其中的某些方法，Webpack 会去掉不需要的方法，仅打包你使用的部分，从而减小文件体积。
4. optimize-css-assets-webpack-plugin 和 css-minimizer-webpack-plugin
在生产环境中，你还可以使用 css-minimizer-webpack-plugin 或 optimize-css-assets-webpack-plugin 来压缩 CSS 文件。
npm install --save-dev css-minimizer-webpack-pluginconst CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {optimization: {minimizer: [new CssMinimizerPlugin() // 使用 css-minimizer-webpack-plugin 压缩 CSS]}
};
CSS 文件会被压缩，去除不必要的空白符、注释和重复的 CSS 规则，减小 CSS 文件体积。
