webpack5 + vue3 从零配置项目

前言

虽然在实际项目当中很少会从 0 到 1 配置一个项目，毕竟很多重复工作是没有必要的，脚手架将这些重复性的工作进行了整合，方便开发者使用。也正因如此，导致部分开发者过于依赖脚手架，却不清楚其内部的实现流程，因此通过从 0 到 1 去配置和搭建项目可以更好的理解开发中使用的脚手架都帮我们做了哪些事情。

准备工作

创建目录结构

这里直接使用 npm init vite@latest命令生成 vue3 最新的目录结构：

当然，需要对这个目录进行一些调整：

• 将 vite.config.js 换成 webpack.config.js：因为我们要基于 webpack5 对项目进行编译构建
• 初始化新的 package.json：原本的 package.json 依赖了一些我们不需要的内容，因此直接删除重新初始化
• 去除 index.html 中的 <script type="module" src="/https/blog.csdn.net/src/main.js"></script>，因为这是 vite 需要的，但 webpack 并不需要

下面是调整后的目录结构：

安装基本依赖

下面列出了需要的一些基本依赖，其他的依赖在后面需要的时候在进行安装：

• npm install vue@next
• npm install webpack webpack-cli webpack-dev-server -D

对 webpack 进行基本配置

// webpack.config.js

const path = require('path')

module.exports = {
   
    entry: {
   
        path: './src/main.js'
    },
    output: {
   
        filename: 'assets/js/[name].[contenthash:6].js',
        path: path.resolve(__dirname, './dist')
    }
}

在 package.json 中创建脚本

// package.json

  "scripts": {
   
    "dev": "webpack server --mode=development",
    "build": "webpack --mode=production"
  }

针对不同文件类型进行配置 webpack

启动项目

完后以上准备工作之后，我们就可以通过 npm run dev 命令来启动项目，但是你会发现这样的错误：

其实就是 webpack 不能认识 .vue 文件，它需要我们提供一个 loader 对其进行处理，这个 loader 就是官方文档中提到的：

其中 @vitejs/plugin-vue 这个是 vite 才需要的，因此我们只需要 vue-loader@next、@vue/compiler-sfc

注意：vue-loader 默认是处理 vue2 的，这里使用的是 vue3，所以要安装 vue-loader@next

在 webpack中处理 .vue 文件

首先通过 npm install vue-loader@next @vue/compiler-sfc -D 安装需要的依赖，然后在 webpack.config.js 中进行配置：

// webpack.config.js

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

module.exports = {
   
   entry: {
   
       path: './src/main.js'
   },
   module: {
   
       rules: [
           {
   
               test: /\.vue$/,
               use: 'vue-loader'
           }
       ]
   }</