用 webpack 从 0 到 1 搭建一个 Vue 项目

这篇文章假设你已经了解了 webpack 一些很常用的配置。如果你还没有，可以看看我不久前写的这篇 适合新手的 webpack 5 实战演练，就算对 webpack 有一个基本的了解。

用 vue-cli 创建一个 vue 项目的时候，它的 webpack 配置是什么样的呢？

如果我知道了它的配置，那我就可以照猫画虎，从 0 到 1 搭建一个 Vue 项目。

inspect webpack 配置

首先下载 vue-cli ，再创建一个项目。

# 全局下载
npm install -g @vue/cli

# 创建一个项目
vue create -m npm vue-demo

-m npm 表示指定下载依赖时的包管理器使用 npm。如果不指定，目前 vue-cli@5 默认使用包管理器 pnpm，这样在 node_modules 里就不能 debugger 调试了。

执行命令

# 开发环境下 webpack 配置
vue inspect > output.js --mode development

# 生产环境下 webpack 配置
vue inspect > output.js --mode production

webpack 搭建 vue 项目核心

首先肯定要能够识别 .vue 文件呀。

通过查看 inspect 的 webpack 配置，主要是需要使用到 vue-loader、VueLoaderPlugin。

于是就下载依赖：

npm i vue-loader vue-template-compiler -D

npm i vue

VueLoaderPlugin 通过解构 vue-loader 获得

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

然后进行配置：

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

配置好后，webpack 就能够识别 .vue 文件了。

测试

写一些代码测试一下。

main.js

import App from './App.vue'

import { createApp } from 'vue'

createApp(App).mount('#app')

App.vue

<template>
  <div class="a">hello, {{ msg }}</div>
</template>
<script setup>
  const msg = 'world!!!!'
</script>
<style>
.a {
  color: red;
  font-size: 30px;
}
</style>

运行命令 npm run dev，然后发现一个奇怪的问题。通过 http://localhost:8081/ 打开项目会报错。

而通过 http://192.168.1.3:8081/ 打开项目不会有任何问题。

运行命令 npm run build，也不会出现问题。

这个奇怪的问题可以先暂时不管。重要的是，现在我们已经能让 webpack 识别 .vue 文件了！🎉🎉🎉

本文演示项目 github 仓库地址