编辑“︁Webpack配置基础”︁（章节）

= Webpack配置基础 =

== 介绍 ==  
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它能够将多个模块（如 JavaScript、CSS、图片等）打包成一个或多个优化后的文件，从而提高应用程序的性能和可维护性。在 Vue.js 项目中，Webpack 通常用于处理模块依赖、代码转换（如 Babel）、资源优化（如压缩）等任务。本章节将介绍 Webpack 的基础配置，帮助初学者和进阶开发者理解其核心概念和实际应用。

== 核心概念 ==  
Webpack 的核心配置围绕以下几个关键概念展开：  
* '''入口（Entry）'''：指定 Webpack 从哪里开始构建依赖图。  
* '''输出（Output）'''：定义打包后的文件输出位置和命名规则。  
* '''加载器（Loaders）'''：处理非 JavaScript 文件（如 CSS、图片），将其转换为有效模块。  
* '''插件（Plugins）'''：执行更广泛的任务，如代码优化、资源管理等。  
* '''模式（Mode）'''：设置开发（development）或生产（production）环境，影响默认优化行为。

== 基础配置示例 ==  
以下是一个简单的 Webpack 配置文件（`webpack.config.js`）示例，适用于 Vue.js 项目：  

<syntaxhighlight lang="javascript">
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  // 入口文件
  entry: './src/main.js',

  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  // 模块规则（加载器）
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },

  // 插件
  plugins: [
    new VueLoaderPlugin()
  ],

  // 模式
  mode: 'development'
};
</syntaxhighlight>

=== 代码解释 ===  
1. '''入口（entry）'''：`./src/main.js` 是 Vue.js 应用的启动文件。  
2. '''输出（output）'''：打包后的文件会保存到 `dist/bundle.js`。  
3. '''加载器（loaders）'''：  
   * `vue-loader` 处理 `.vue` 单文件组件。  
   * `babel-loader` 转换 ES6+ 代码为兼容性更好的 JavaScript。  
   * `css-loader` 和 `style-loader` 处理 CSS 文件。  
4. '''插件（plugins）'''：`VueLoaderPlugin` 是 `vue-loader` 的必需插件。  
5. '''模式（mode）'''：开发模式下会启用调试工具，不压缩代码。

== 实际应用场景 ==  
=== 场景：优化生产构建 ===  
在生产环境中，通常需要压缩代码并提取公共依赖。以下是一个优化后的配置片段：  

<syntaxhighlight lang="javascript">
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin()],
    splitChunks: {
      chunks: 'all'
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css'
    })
  ]
};
</syntaxhighlight>

=== 效果说明 ===  
* `TerserPlugin` 压缩 JavaScript 代码。  
* `splitChunks` 将公共依赖（如 Vue.js 库）提取到单独文件。  
* `MiniCssExtractPlugin` 将 CSS 提取到独立文件，并添加哈希值以缓存。

== 高级配置技巧 ==  
=== 动态导入与懒加载 ===  
通过动态导入（`import()`）实现路由懒加载，减少初始加载时间：  

<syntaxhighlight lang="javascript">
// Vue Router 配置示例
const UserDetails = () => import('./views/UserDetails.vue');
</syntaxhighlight>

Webpack 会自动将此代码拆分为独立的块（chunk），按需加载。

=== 环境变量注入 ===  
使用 `webpack.DefinePlugin` 注入环境变量：  

<syntaxhighlight lang="javascript">
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify('https://api.example.com')
    })
  ]
};
</syntaxhighlight>

== 可视化依赖分析 ==  
使用 `mermaid` 绘制 Webpack 构建流程示意图：  

<mermaid>
graph TD
  A[入口文件 main.js] --> B[解析依赖]
  B --> C[加载 .vue 文件]
  B --> D[加载 .js 文件]
  B --> E[加载 .css 文件]
  C --> F[vue-loader 处理]
  D --> G[babel-loader 转换]
  E --> H[css-loader 处理]
  F --> I[合并到 bundle.js]
  G --> I
  H --> I
</mermaid>

== 常见问题解答 ==  
'''Q: Webpack 和 Vite 有什么区别？'''  
A: Webpack 基于打包器模式，提前构建所有资源；Vite 利用浏览器原生 ES 模块，按需编译。Webpack 更适合复杂项目，Vite 更适合快速开发。  

'''Q: 如何调试 Webpack 配置？'''  
A: 使用 `node --inspect-brk node_modules/webpack/bin/webpack.js` 启动调试，或在配置中添加 `debug: true`。

== 总结 ==  
Webpack 是 Vue.js 项目构建的核心工具，通过合理配置入口、加载器、插件等选项，可以实现高效的代码打包和优化。初学者应从基础配置入手，逐步掌握高级特性如代码分割和环境变量管理。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js部署与构建]]