webpack 配置文件中 mode 有哪些模式？

文章目录

- - [1. development（开发模式）](#1. development（开发模式）)
  - [2. production（生产模式）](#2. production（生产模式）)
  - [3. none（无模式）](#3. none（无模式）)
  - [4. 配置示例](#4. 配置示例)
  - [5. webpack打包](#5. webpack打包)

在 Webpack 配置文件中， mode 选项用于指定打包环境，它有以下三种内置模式：

1. development（开发模式）

特点：专注于开发体验和调试便利性
自动启用一些开发友好的配置：
- 代码不进行压缩和混淆
- 保留详细的调试信息
- 启用 NamedChunksPlugin 和 NamedModulesPlugin，使 chunk 名称更具可读性
适合在开发过程中使用，便于代码调试

2. production（生产模式）

特点：专注于代码优化和性能提升
自动启用一系列优化配置：
- 代码会被压缩和混淆
- 移除未使用的代码（tree-shaking）
- 启用更多优化插件（如 TerserPlugin、ModuleConcatenationPlugin 等）
- 输出更小的文件体积
适合项目上线前的最终打包

3. none（无模式）

特点：不启用任何默认优化配置
所有优化和插件都需要手动配置
适合需要完全自定义 Webpack 行为的场景

4. 配置示例

在 webpack.config.js 中设置模式：

javascript 复制代码

module.exports = {
  mode: 'development', // 或 'production' 或 'none'
  // 其他配置...
};

也可以通过命令行参数临时指定模式，优先级高于配置文件：

bash 复制代码

# 开发模式打包
webpack --mode development

# 生产模式打包
webpack --mode production

不同模式会影响 Webpack 的内置优化策略，合理选择模式可以在开发效率和生产性能之间取得平衡。

5. webpack打包

Webpack 是一个静态模块打包工具，它可以将多个 JavaScript 文件、CSS、图片等资源打包成一个或多个最终的静态文件。下面我将介绍如何使用 Webpack 进行基本的项目打包配置。

基本配置步骤

初始化项目并安装依赖

bash 复制代码

# 创建项目目录并进入
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 配置文件

js 复制代码

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 中添加以下脚本：

json 复制代码

"scripts": {
  "build": "webpack",
  "dev": "webpack serve --open"
}

使用不同的加载器处理其他类型文件

如果需要处理 CSS、图片等资源，需要安装相应的加载器：

bash 复制代码

# 处理 CSS 文件
npm install style-loader css-loader --save-dev

# 处理图片
npm install file-loader --save-dev

然后在 webpack.config.js 中添加模块规则：

javascript 复制代码

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 配置非常灵活，可以根据项目需求进行各种定制化配置，从简单的单页应用到复杂的多页面应用都能很好地支持。