Vue.js 3 项目构建神器：Webpack 全攻略

大家好，我是全栈王校长。

看到这个标题，很多朋友可能会纳闷：现在不是都用 Vite 吗，为什么还要学 Webpack？原因很简单：在大型企业级项目中，稳定性和成熟度才是最重要的考量因素。Webpack 自2013年问世以来，经过了多年的发展和实践检验，生态体系非常完善，几乎任何构建问题都能找到现成的解决方案。而 Vite 虽然轻快，但毕竟2020年才正式发布，生态积淀相对较少。

因此，今天我们就来聊聊如何用 Webpack 构建 Vue.js 3 应用。首先，我们得搞清楚 Webpack 和 Vite 的本质差异，这样才能选对工具。

Webpack vs Vite：本质差异在哪？

我一直认为，评判技术的好坏必须结合它的设计初衷。Webpack 和 Vite 的根本区别在于它们的设计理念完全不同。

Vite 定位为现代 Web 开发工具链，它集成了多种构建功能，开发者可以开箱即用。它利用浏览器原生 ES 模块支持，在开发阶段实现快速热更新。

相比之下，Webpack 专注于构建打包本身，它更像是一个构建平台，需要开发者手动配置各种插件和加载器才能实现完整的构建流程。虽然配置复杂，但它提供了更大的灵活性和控制力。

那么，两者的技术能力或者功能有什么异同点呢？

这两种工具在功能上有不少相似之处，都是用来处理前端代码的打包工作。不过它们的实现方式不同：Vite 提供了更多开箱即用的功能，减少了配置工作；而 Webpack 则更灵活，但也需要更多的手动配置。

在实际的企业项目中，稳定可靠比便捷更重要。虽然 Webpack 需要多花些时间配置，但一旦设置好了，后续开发就很稳定。

下面，我们来一步步搭建一个基于 Webpack 的 Vue.js 3 项目。

Webpack + Vue.js 3 项目搭建全流程

搭建项目的基本流程包括以下几个环节：

准备项目结构和基础代码；
安装必要的依赖包；
设置 Webpack 对 Vue.js 3 的编译选项；
运行编译命令。

第一步：规划项目结构，标准布局如下：

lua 复制代码

.
├── dist/*
├── package.json
├── src
│   ├── app.vue
│   └── index.js
└── webpack.config.js

各文件夹及文件的作用说明：

dist：存放编译后的成品文件，包括 JS、CSS、HTML 等浏览器可直接运行的静态资源；
package.json：项目配置文件，记录了项目依赖、版本号及脚本命令等信息；
src：源代码存放目录，所有开发工作都在此目录下进行；
webpack.config.js：Webpack 配置文件，定义了如何处理和打包我们的代码。

接着我们在 src 目录下创建两个核心文件。首先是组件文件 src/app.vue，代码如下：

xml 复制代码

<template>
  <div class="demo">
    <div class="text">Count: {{state.count}}</div>
    <button class="btn" @click="onClick">Add</button>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';
  const state = reactive({
    count: 0
  });
  const onClick = () => {
    state.count ++;
  }
</script>

<style>
.demo {
  width: 200px;
  padding: 10px;
  box-shadow: 0px 0px 9px #00000066;
  text-align: center;
}
.demo .text {
  font-size: 28px;
  font-weight: bolder;
  color: #666666;
}
.demo .btn {
  font-size: 20px;
  padding: 0 10px;
  height: 32px;
  min-width: 80px;
  cursor: pointer;
} 
</style>

然后是入口文件 src/index.js，内容如下：

javascript 复制代码

import { createApp } from 'vue';
import App from './app.vue';

const app = createApp(App);
app.mount('#app');

完成第一步后，进入第二步：安装项目所需的各种依赖包。

依赖包分为两类：一类是项目运行时必需的（runtime dependencies），另一类是开发时使用的工具（dev dependencies）。安装时需要用不同的命令参数加以区分。

首先安装运行时依赖（即项目实际需要的库）：

shell 复制代码

npm i --save vue

这条命令会把 Vue.js 添加到 package.json 的 dependencies 部分，表示这是项目运行所必需的库。

javascript 复制代码

{
  "dependencies": {
    "vue": "^3.2.37"
  }
}

接下来安装开发时所需的工具包：

shell 复制代码

npm i --save-dev css-loader mini-css-extract-plugin vue-loader webpack webpack-cli

这些工具仅在开发和构建阶段使用，不会出现在最终产品中。它们会被添加到 package.json 的 devDependencies 部分。

javascript 复制代码

{
  "devDependencies": {
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.1",
    "vue-loader": "^17.0.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

第三步：编写 Webpack 配置文件

下面是完整的 webpack.config.js 配置代码，请先看一遍整体结构：

javascript 复制代码

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
};

这份配置告诉 Webpack 如何处理我们的 Vue.js 3 代码，包括 JS、CSS 和 Vue 单文件组件，最终生成浏览器可以直接运行的文件。