webpack 配置文件中 mode 有哪些模式？
文章目录
- 1. development（开发模式）
- 2. production（生产模式）
- 3. none（无模式）
- 4. 配置示例
- 5. webpack打包
- 基本配置步骤
- 常用命令
- 扩展配置
在 Webpack 配置文件中，
mode 选项用于指定打包环境，它有以下三种内置模式：
1. development（开发模式）
- 特点：专注于开发体验和调试便利性
- 自动启用一些开发友好的配置：
- 代码不进行压缩和混淆
- 保留详细的调试信息
- 启用
NamedChunksPlugin和NamedModulesPlugin，使 chunk 名称更具可读性
- 适合在开发过程中使用，便于代码调试
2. production（生产模式）
- 特点：专注于代码优化和性能提升
- 自动启用一系列优化配置：
- 代码会被压缩和混淆
- 移除未使用的代码（tree-shaking）
- 启用更多优化插件（如
TerserPlugin、ModuleConcatenationPlugin等） - 输出更小的文件体积
- 适合项目上线前的最终打包
3. none（无模式）
- 特点：不启用任何默认优化配置
- 所有优化和插件都需要手动配置
- 适合需要完全自定义 Webpack 行为的场景
4. 配置示例
在 webpack.config.js 中设置模式：
module.exports = {mode: 'development', // 或 'production' 或 'none'// 其他配置...
};
也可以通过命令行参数临时指定模式，优先级高于配置文件：
# 开发模式打包
webpack --mode development# 生产模式打包
webpack --mode production
不同模式会影响 Webpack 的内置优化策略，合理选择模式可以在开发效率和生产性能之间取得平衡。
5. webpack打包
Webpack 是一个静态模块打包工具，它可以将多个 JavaScript 文件、CSS、图片等资源打包成一个或多个最终的静态文件。下面我将介绍如何使用 Webpack 进行基本的项目打包配置。
基本配置步骤
- 初始化项目并安装依赖
# 创建项目目录并进入
mkdir webpack-demo && cd webpack-demo# 初始化 npm
npm init -y# 安装 webpack 核心依赖
npm install webpack webpack-cli --save-dev
- 创建基本项目结构
webpack-demo/
├── src/
│ └── index.js
├── dist/
│ └── index.html
├── webpack.config.js
└── package.json
- 基本的 webpack 配置文件
const path = require('path');module.exports = {// 入口文件entry: './src/index.js',// 输出配置output: {// 输出文件名filename: 'bundle.js',// 输出路径（必须是绝对路径）path: path.resolve(__dirname, 'dist'),// 每次构建前清空dist目录clean: true,},// 模式：development（开发）或 production（生产）mode: 'development',// 开发工具，用于调试devtool: 'inline-source-map',// 开发服务器配置devServer: {static: './dist',// 自动打开浏览器open: true,// 热更新hot: true,},
};- 配置 package.json 脚本
在 package.json 中添加以下脚本：
"scripts": {"build": "webpack","dev": "webpack serve --open"
}
- 使用不同的加载器处理其他类型文件
如果需要处理 CSS、图片等资源，需要安装相应的加载器：
# 处理 CSS 文件
npm install style-loader css-loader --save-dev# 处理图片
npm install file-loader --save-dev
然后在 webpack.config.js 中添加模块规则：
module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource',},],
}
常用命令
npm run build：执行生产环境打包npm run dev：启动开发服务器，支持热更新
扩展配置
- 可以使用
html-webpack-plugin自动生成 HTML 文件 - 可以使用
mini-css-extract-plugin将 CSS 提取到单独的文件 - 可以配置
optimization进行代码分割和优化
Webpack 配置非常灵活，可以根据项目需求进行各种定制化配置，从简单的单页应用到复杂的多页面应用都能很好地支持。