本系列文章详细阐述基于Vue 3.X + Webpack 5.X，从徒手搭建项目开始到各个常用插件的配置和应用，目的是让学习者能快速掌握项目结构及vue的开发要领。
目录
1. 概述
本文章详细阐述基于Vue 3.X + Webpack 5.X 徒手搭建项目的过程，通过搭建过程，全面了解 基本配置项及插件安装。
文件底部有所有插件的清单及其版本号，如果你根据下述命令安装的版本与之不一致，并且产生版本冲突等不可解决的问题时，建议在安装插件时强制指定版本，避免学习初期陷入版本冲突的解决过程。
安装插件时在插件名称后面用 @version 的格式指定版本号，如下示例：
npm install vue@3.2.31 -S2. 安装nodejs
官方下载链接，点击下方红色的链接，选择 64-bit 的可执行安装文件，下载后安装。
3. 初始化项目
3.1 创建项目目录 vue-ui，启动 visual studio code，使用“打开文件夹”方式，打开该目录。
3.2 点击菜单： 终端 => 新建终端，打开终端窗口
3.3 在终端窗口中执行 npm init -y 命令，如下所示：
PS D:\Project\Vue-UI> npm init -y
Wrote to D:\Project\Vue-UI\package.json:
{
"name": "vue-ui", // 项目名称
"version": "1.0.0", // 项目版本
"description": "", // 项目描述
"main": "index.js", // 项目打包主入口
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" // webpack的test脚本
},
"keywords": [], // 项目的关键字
"author": "", // 作者
"license": "ISC" // 许可证
}上面的注解是我加的。scripts 里除了 test 外，以后还可以添加 dev、build 等，示例如下。
"dev": "webpack serve --progress --config build/webpack.dev.conf.js"在后续每次启动开发环境项目自测时，就需要执行 npm run dev，此时，实际调用的就是 scripts 里的 dev 指定的脚本。
3.4 执行如下命令，安装 webpack 及相关插件：
PS D:\Project\Vue-UI> npm install webpack webpack-cli --save-dev
added 329 packages in 21s执行完上述命令后，可以打开 package.json 文件，看到多了 devDependencies节点，且该节点中包含了刚才安装的四个插件及其版本号。
"devDependencies": {
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
}3.5 手动添加 webpack.config.js、index.html、src/main.js 三个文件，目录结构如下图：
其中，webpack.config.js 是 webpack 的配置文件，index.html 是网站入口 html 文件的模板，main.js 是打包入口文件。
webpack.config.js文件中添加如下代码：
'use strict'
const path = require('path')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
}
}
package.json 文件的 scripts 节点中增加如下脚本：
"dev": "webpack --config ./webpack.config.js"index.html文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html,body,#app{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
main.js文件内容如下：
const app = document.getElementById('app')
app.textContent = '你好！'3.6 执行 npm run dev 命令
执行命令后，可以看到如下输出，表示编译成功：
PS D:\Project\Vue-UI> npm run dev
> vue-ui@1.0.0 dev
> webpack --config ./webpack.config.js
asset static/js/main.js 1.17 KiB [emitted] (name: main)
./src/main.js 1 bytes [built] [code generated]
webpack 5.70.0 compiled successfully in 108 ms同时，自动在根目录下创建了 dist 目录，并创建了 main.js 文件，目录结构如下：
可以看出，编译过程没有将 html 文件打包输出，下一节介绍 html 打包插件
4. html 文件打包
4.1 执行下列脚本添加 html 文件打包插件
npm install html-webpack-plugin -D命令参数 -D 是指定插件为开发环境用插件，在 package.json 中配置在 devDependencies 节点； -S是指定插件为生产环境用插件，在package.json 中配置在 dependencies 节点。
4.2 设置 webpack.config.js 文件
添加如下代码
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 在module.exports添加如下配置项
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包输出的文件名
title: '应用平台' // html 文件内可以通过 <%= htmlWebpackPlugin.options.title %> 引用
})
]webpack.config.js完整的文档如下：
'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包输出的文件名
title: '应用平台' // html 文件内可以通过 <%= htmlWebpackPlugin.options.title %> 引用
})
]
}4.3 添加 index.html 内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
4.4 添加 main.js 内容
const app = document.getElementById('app')
app.textContent = '你好！'4.5 编译代码
执行 npm run dev命令，显示如下输出，表示编译成功
PS D:\Project\Vue-UI> npm run dev
> vue-ui@1.0.0 dev
> webpack --config ./webpack.config.js
asset static/js/main.js 1.24 KiB [emitted] (name: main)
asset index.html 280 bytes [compared for emit]
./src/main.js 73 bytes [built] [code generated]
webpack 5.70.0 compiled successfully in 169 ms完成编译后，你可以看到dist目录下有 index.html 文件输出，其具体内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应用平台</title>
<script defer src="static/js/main.js"></script></head>
<body>
<div id="app"></div>
</body>
</html>
4.6 运行网页
用浏览器打开 dist 目录下的 index.html 文件，即可看到如下的输出：
5. vue文件打包
5.1 vue 插件安装
npm install vue@next -S此处需加上 @next 以获取最新的稳定版
5.2 在 src 目录下添加 App.vue 文件
<template>
<div>你好！你核酸了吗？</div>
</template>
<script>
export default {
}
</script>5.3 修改 main.js 内容为如下内容：
import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import App from './App.vue' // 引入 APP.vue
const app = createApp(App) // 初始化应用
app.mount('#app') // 将 App 中模板内容挂载到 app 节点代码还可以写成如下格式：
import App from './App.vue' // 引入 APP.vue
const app = Vue.createApp(App) // 初始化应用
app.mount('#app') // 将 App 中模板内容挂载到 app 节点从中可以看出，对于 vue 3.X 来说，Vue已成为全局对象
5.4 代码编译
此时执行 npm run dev，会收到如下报错信息：
modules by path ./src/ 361 bytes
./src/main.js 248 bytes [built] [code generated]
./src/App.vue 113 bytes [built] [code generated] [1 error]
ERROR in ./src/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>你好！你核酸了吗？</div>
| </template>
@ ./src/main.js 2:0-27 4:22-25
webpack 5.70.0 compiled with 1 error in 572 ms
出错提示中告知需要一款合适的加载器处理<template>文件类型，查资料可知，需要安装 vue-loader 插件。
vue-loader 本质上就是一个代码解析器和翻译器，其能够解析和翻译其中的<template>和<script>标签的内容，但是，对于<style>标签，它会提交给其他加载器处理，后续会陆续介绍这部分内容。
5.5 安装 vue-loader 插件
npm install vue-loader@next -D在 webpack.config.js 中添加如下配置：
// 文件顶部添加如下代码
const VueLoaderPlugin = require('vue-loader')
// 在 plugins 中添加如下代码
new VueLoaderPlugin()
// 在 module.exports 中添加如下代码
module: {
rules: [
{
test: /\.vue$/, // 文件扩展名 .vue 的正则表达式
use: ['vue-loader'] // 使用 vue-loader 加载器
}
]
}webpack.config.js 完整内容如下：
'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包输出的文件名
title: '应用平台' // html 文件内可以通过 <%= htmlWebpackPlugin.options.title %> 引用
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/, // 文件扩展名 .vue 的正则表达式
use: ['vue-loader'] // 使用 vue-loader 加载器
}
]
}
}5.6 编译
执行 npm run dev 命令，会报如下错误：
[webpack-cli] Failed to load 'D:\Project\Fairyland\Vue-UI\webpack.config.js' config
[webpack-cli] TypeError: VueLoaderPlugin is not a constructor
at Object.<anonymous> (D:\Project\Fairyland\Vue-UI\webpack.config.js:21:7)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at WebpackCLI.tryRequireThenImport (D:\Project\Fairyland\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:244:16)
at loadConfigByPath (D:\Project\Fairyland\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1712:30)
at D:\Project\Fairyland\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1767:11错误提示：VueLoaderPlugin 不是一个构造函数。这是由于 Vue 3.X 不再支持 2.X 的一些语法导致的，需要在 VueLoaderPlugin 两边加上大括号就行了，如下：
const { VueLoaderPlugin } = require('vue-loader')5.7 编译并执行
执行 npm run dev 命令，然后用浏览器打开 dist 目录下的 index.html 文件，可以看到如下内容：
6. CSS 解析
6.1 添加 CSS 代码
在 App.vue 文件中添加如下代码
<style>
div {
color: red
}
</style>6.2 编译
执行 npm run dev 时，会报如下错误信息：
ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css (./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[2].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css) 2:8
Module parse failed: Unexpected token (2:8)
File was processed with these loaders:
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|
> div {
| color: red
| }
@ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 1:0-151 1:0-151 1:152-292 1:152-292
@ ./src/App.vue 5:0-62
@ ./src/main.js 2:0-27 4:22-25
webpack 5.70.0 compiled with 1 error in 616 ms出错提示中告知需要一款合适的加载器处理 div 的解析，由于要对 div 解析，首先要解析 <style> 标签，但是，vue-loader 自身不处理 <style> 标签，故需要先加载 vue-style-loader ，然后加载 css-loader 插件。
6.3 插件安装
执行下列命令安装 vue-style-loader、css-loader 插件
npm install vue-style-loader css-loader -D在 webpack.config.js 中 module-rules 节点中增加如下规则：
{
test: /\.css$/, // 文件扩展名 .css 的正则表达式
use: ['vue-style-loader', 'css-loader'] // 使用 vue-style-loader、css-loader 加载器
}注意，use 中的两个插件的先后关系不可以写反，先后关系表示处理的前后关系，即先由 vue-style-loader 处理<style>标签，然后调用 css-loader 处理标签里的 css 内容。
如果此处只安装和配置 css-loader 插件，那么编译是通过的，不会报错，但是，css 内容将会丢失。
6.4 编译并执行
执行命令 npm run dev，并用浏览器打开 dist 目录下的 index.html，可以看到如下效果：
7. 启动Web服务
上述过程中，每次都要打开 index.html 文件才能看到效果，而且随着后续功能的扩展，静态文件无法实现服务器的完整效果，故需要提供自动加载Web服务的功能。
7.1 插件安装
执行下列脚本安装 webpack-dev-server 插件
npm install webpack-dev-server -D7.2 修改编译脚本
将 package.json 文件的 scripts 节点的 dev 命令脚本，改为如下：
"dev": "webpack serve --progress --config webpack.config.js"7.3 修改配置文件
将 webpack.config.js 文件的 module.exports 中增加如下配置：
devServer: {
host: 'localhost',
port: 8080,
open: true
},上面 open 参数改为 false 时，关闭自动打开浏览器效果。
7.4 编译
执行 npm run dev，浏览器上显示如下内容：
注：360杀毒软件在powershell启动浏览器时，会误报病毒的，忽略即可
8. 偷懒配置
8.1 自动匹配文件扩展名
在 webpack.config.js 的 module.exports 中添加 extensions 配置项：
resolve: {
extensions: ['.js', '.vue', '.json'], // 可以省略的文件扩展名
},添加上述配置项后，可以在文件路径描述中，省去 .js、.vue、json三种扩展名，例如：
import App from './App.vue'可以改写为：
import App from './App'8.2 添加指向 src 目录的匿名
在 webpack.config.js 的 module.exports 中添加 alias 配置项：
resolve: {
alias:{
'@': path.resolve(__dirname, 'src') // 路径中用 @ 表示 src 目录
}
},添加上述 @ 匿名的配置项后，可以将指向 src 的路径直接用 @ 表示，例如：
import Home from '../src/views/Home'可以改写成：
import Home from '@/views/Home'9. 清理dist目录插件
默认情况下，每次编译都不会清空 dist 目录，这将导致会存在一些废旧文件存在于该目录中，故可以引入 clean-webpack-plugin 插件，先清除 dist 目录，然后再编译文件。
9.1 安装插件
npm install clean-webpack-plugin -D9.2 配置 webpack.config.js
增加如下代码
# 在顶部增加如下代码
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
# 在 plugins 节点中增加如下代码
new CleanWebpackPlugin()10. 插件版本清单
完成上述过程后，安装的插件清单如下：
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"vue-style-loader": "^4.1.3",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"vue": "^3.2.31",
"vue-loader": "^17.0.0"
}
1600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
