webpack4手动搭建Vue项目

小满视频

• 很多解释使用通义灵码搜的,通义灵码的搜索结果也是有错误的
• 全程使用pnpm包管理工具，和npm的用法基本一样

学习总结
1. 多看看webpack官网
2. webpack的作用：配置一堆东西，达到运行程序的目的
3. 无论什么东西都转成js，然后插入到一个空空的html文件中运行
4. webpack就是个管理者，管理着一堆loader，一堆loader的作用就是把自己负责的东西弄成js

手动构建webpack基本环境

webpack官网链接

1. 初始化node项目

3. 初始化一个 Node.js 项目，并生成一个 package.json 文件

pnpm init

执行命令后自动创建package.json文件，内容如下：

{"name": "webpack-demo", 项目的名称"version": "1.0.0",项目的版本号"description": "",项目的简短描述"main": "index.js",项目的主入口文件"scripts": {项目的脚本命令，如测试脚本。"test": "echo \"Error: no test specified\" && exit 1"定义了一个简单的测试命令，当运行 npm test 时，会输出错误信息并退出。},"keywords": [],项目的关键词列表，用于搜索和分类"author": "",项目的作者信息"license": "ISC"项目的许可类型
}

2. 生成TypeScript项目

4. 安装typescript

pnpm i typescript -g

5. 生成 TypeScript 项目，和项目的初始配置文件 tsconfig.json

tsc --init

• tsconfig.json内容

{"compilerOptions": {target: es2016  设置目标 ECMAScript 版本module: commonjs 指定模块系统。这里的 "commonjs" 表示使用 CommonJS 模块系统。strict: true 启用所有严格的类型检查选项esModuleInterop: true 启用 ES 模块与 CommonJS 模块之间的互操作性。这里的 true 表示启用此功能。skipLibCheck: true 是否跳过类型声明文件的检查。这里的 true 表示跳过类型声明文件的检查。forceConsistentCasingInFileNames: true 强制要求文件名大小写一致。这里的 true 表示启用此功能。}
}

-查看全局安装的插件的安装位置

npm config get prefix

3. 安装webpack

webpack官网

• webpack.config.js文件中所有的配置项都是webpack管理的

• 安装webpack

pnpm add webpack -D

• Webpack 是一个非常流行的 JavaScript 模块打包器，用于将现代前端应用中的各种资源（如 JavaScript、CSS、图片等）打包成一个或多个浏览器可以加载的文件。Webpack 提供了一种强大的方式来组织和管理前端资源，使其易于维护和优化。
• 根目录创建webpack.config.js文件
• webpack.config.js中配置打包的入口和出口文件及打包后文件的路径

const config = {mode: 'development', // 开发模式entry: "./src/main.ts", // 入口文件output: {filename: "[fullhash].js", // 输出文件名path: path.resolve(__dirname , "dist") // 输出路径},
}
module.exports = config;

__dirname: 表示当前配置文件所在的目录。
‘dist’: 表示输出文件所在的子目录名。
path.resolve: 用于将相对路径转换为绝对路径。

4. 安装webpack-cli

pnpm add webpack-cli -D

• 在package.json文件中配置打包命令

  "scripts": {"bulid": "webpack",......},

• webpack-cli 是 Webpack 提供的命令行工具，用于在命令行中执行 Webpack 相关的操作。webpack-cli 主要完成以下几项工作：

  1. 解析和处理命令行参数：webpack-cli 负责解析用户在命令行中输入的参数，包括配置文件路径、打包模式、插件等信息。通过解析这些参数，webpack-cli 确定如何执行 Webpack 相关的操作。
  2. 载入并执行 Webpack 配置：webpack-cli 负责读取并解析指定的 Webpack 配置文件（通常是 webpack.config.js）。通过读取配置文件，webpack-cli 知道如何进行模块打包、资源处理等操作。
  3. 调用 Webpack API：通过调用 Webpack 提供的 API，webpack-cli 将用户输入的参数和配置转化为具体的 Webpack 打包操作。webpack-cli 可以执行 Webpack 的构建、开发服务器启动、打包分析等功能。
  4. 提供辅助功能：除了执行 Webpack 操作外，webpack-cli 还提供了一些辅助功能，比如生成 Webpack 相关的配置文件模板、帮助命令、插件等，帮助开发者更方便地使用 Webpack。

• 在命令行输入：pnpm run dev 、 pnpm run build 时，通过webpack-cli执行webpack中的命令，并使用相应的配置，比如：webpack.config.js中打包的入口和出口等配置项

• 不安装此插件也可以运行webpack，只不过可能需要很多复杂的命令

5. 安装webpack-dev-server

• 作用：
  webpack-dev-server 是一个基于 Node.js 的本地开发服务器，它可以与 Webpack 一起使用，为开发者提供实时重新加载和热模块替换等功能。它能够自动监听文件更改，并在文件发生变化时重新编译并刷新浏览器，从而极大地提高了开发效率。

pnpm add webpack-dev-server -D

6. 安装html-webpack-plugin

• 作用：
  用于生成 HTML 文件，并自动注入 Webpack 打包后的 JavaScript 和 CSS 文件。这个插件可以帮助你轻松地管理和自动化 HTML 文件的生成过程，确保每次构建后都能得到最新的 HTML 文件。

pnpm add html-webpack-plugin -D

• 在package.json文件中配置运行命令

  "scripts": {"dev":"webpack-dev-server --open",......},

–open:自动打开浏览器

• 在webpack.config.js中配置此插件：

// 导入html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");

    plugins: [new HtmlWebpackPlugin({template: './public/index.html', // 指定模板文件filename: 'index.html',        // 输出文件名inject: 'body'                 // 注入的位置})],

7. 安装Vue

pnpm add vue -D

• main.ts

import { createApp } from "vue";
import App from "./App.vue";createApp(App).mount("#app");

• App.vue

<template><div>test</div>
</template><script setup lang=ts></script><style scoped lang="scss" >
</style>

• 新建vue.d.ts文件，main.ts中使用了import App from "./App.vue";代码,在编译时TypeScript 不认识.vue文件，在此声明.vue文件的类型

declare module "*.vue"{import type {DefineComponent} from 'vue'const component:DefineComponent<{},{},any>export default component
}

• .d.ts文件是 TypeScript 定义文件的一种。在 TypeScript 中，.d.ts 文件用于提供类型定义，以便 TypeScript 编译器可以理解未包含类型信息的 JavaScript 代码或其他 TypeScript 模块的类型。在编译时TypeScript 编译器会在项目的根目录及其子目录中查找 .d.ts 文件。
• declare module：用于声明一个模块的类型定义
  1. declare module “*.vue”: 声明一个模块，该模块匹配所有的 .vue 文件。
  2. import type {DefineComponent} from ‘vue’: 导入 DefineComponent 类型，这是 Vue.js 中的一个类型，用于表示 Vue 组件。
  3. const component: DefineComponent<{},{},any>: 定义一个名为 component 的常量，它的类型为 DefineComponent。这里的泛型参数分别代表：
     • 第一个参数 {} 表示组件的 props 类型为空。
     • 第二个参数 {} 表示组件的 emits 类型为空。
     • 第三个参数 any 表示组件的 data 类型为 any。

此时pnpm build打包时会报错：

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>
| test
@ ./src/main.ts 2:0-28 4:10-13

翻译：您可能需要一个适当的加载器来处理此文件类型，目前没有配置加载器来处理该文件。请参阅https://webpack.js.org/concepts#loaders

• 打包工具webpack不认识<template>等代码，需要一个新的工具vue-loader

8 安装vue-loader

vue-loader官网

• 安装vue-loader

pnpm add vue-loader -D

• 在webpack.config.js中配置vue-loader

// 导入vue-loader
const { VueLoaderPlugin } = require("vue-loader");const config = { // 执行命令npm run build，按照config中的配置打包文件...module: {rules: [// 以.vue结尾的文件,指定vue-loader加载器来处理{test: /\.vue$/,loader: 'vue-loader'},]},plugins: [...// 引入vue-loader插件new VueLoaderPlugin(),],
}

• 作用：vue Loader 是一个 webpack 的 loader（加载器），它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

• vue-loader部分工作流程:

  1. 调用@vue/compiler-sfc会解析文件，提取每个语言块，
  2. 通过标签中lang="ts" 或 lang="scss"中lang的特性以及 webpack 配置中的规则自动推断出要使用的预处理(loader)
  3. vue-loader调用ts-loader预处理器,处理<script>部分;调用scss-loader预处理器,处理<style>部分
  4. 最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。

• Vue 单文件组件 (SFC) 规范：官网介绍
  vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块

• vue-loader官网介绍说需要安装vue-template-compiler，在vue3中已经包含了相同功能的@vue/compiler-sfc插件，已经不需要再安装
  

9 安装clean-webpack-plugin

• 安装clean-webpack-plugin

pnpm add clean-webpack-plugin -D

• 作用:用于在构建之前(pnpm build)清理输出目录(dist)。这个插件可以帮助你在每次构建时删除旧的构建文件，确保输出目录只包含最新构建的结果。这对于避免旧文件残留、减少混淆等问题非常有用。

• webpack.config.js

// 导入clean-webpack-plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

    plugins: [...// 引入clean-webpack-pluginnew CleanWebpackPlugin()],
}

10. 结果

• 在浏览器中正常执行

pnpm dev

• 打包后,打开/dist/html文件,执行正常

 pnpm build

小结:

项目目录树

各文件代码

1. webpack.config.js

// 导入Configuration，使用注解的方式提供书写代码的智能提示
const {Configuration} = require("webpack");
// 导入vue-loader
const { VueLoaderPlugin } = require("vue-loader");
// 导入html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 导入clean-webpack-plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");/*** @type {Configuration}*/
const config = { // 执行命令npm run build，按照config中的配置打包文件mode: 'development', // 开发模式entry: "./src/main.ts", // 入口文件module: {rules: [// 以.vue结尾的文件,指定使用vue-loader加载器来处理{test: /\.vue$/,loader: 'vue-loader'},]},output: {filename: "[fullhash].js", // 输出文件名path: path.resolve(__dirname , "dist") // 输出路径},// resolve: {//     extensions: ['.tsx', '.ts', '.js'] // 自动解析扩展名// },plugins: [new HtmlWebpackPlugin({template: './public/index.html', // 指定模板文件filename: 'index.html',        // 输出文件名inject: 'body'                 // 注入的位置}),// 引入vue-loader插件new VueLoaderPlugin(),// 引入clean-webpack-pluginnew CleanWebpackPlugin()],
}module.exports = config;

2. tsconfi.json

{"compilerOptions": {target: es2016  module: commonjs strict: true esModuleInterop: true skipLibCheck: true forceConsistentCasingInFileNames: true }
}

3. package.json

{"name": "webpack-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack","dev": "webpack-dev-server --open","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^4.0.0","html-webpack-plugin": "^5.5.0","ts-loader": "^9.5.1","vue": "3.2.38","vue-loader": "^17.4.2","webpack": "^5.74.0","webpack-cli": "^5.1.4","webpack-dev-server": "^4.10.1"}
}

4. main.ts

import { createApp } from "vue";
import App from "./App.vue";createApp(App).mount("#app");

5. end.d.ts

declare module "*.vue"{import type {DefineComponent} from 'vue'const component:DefineComponent<{},{},any>export default component
}

6. App.vue

<template><div>test</div>
</template><script setup lang="ts"></script><style scoped ></style>

7. /public/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webpack-demo</title>
</head>
<body><div id="app"></div>
</body>
</html>

webpack.config.js中的其他配置项

    resolve: {alias: {'@': path.resolve(__dirname, 'src')},extensions: ['.tsx', '.ts', '.js'] // import 时，可以省略后缀名},

1. resolve解析器

官网详细说明

• 设置模块如何被解析
• 使用import和require时的相关配置

alias:设置别名

• 设置@的别名

    resolve: {alias: {'@': path.resolve(__dirname, 'src')}},

1. __dirname 是 Node.js 中的一个全局变量，用于表示当前文件所在的目录的绝对路径
2. 在import或require 语句中使用@时,相当于使用 当前文件的路径/src

extensions:省略后缀名

    resolve: {extensions: ['.tsx', '.ts', '.js'] // import 时，可以省略后缀名},

1. 如需导入文件/src/views/index.js,可以不写后缀import ex from “src/views/index”
2. 假如目录中有同名文件/src/views/index.ts,按照extensions给定的顺序导入的是ts文件

2. plugin 插件

作用: 各种方法修改webpack的构建过程,达到各种各样的目的

1. 美化在构建过程中cmd中展示的各种信息

// 安装
pnpm add friendy-error-webpack-plugin -D
// 引入
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
//使用
plugins: [// 引入friendly-errors-webpack-pluginnew FriendlyErrorsWebpackPlugin({compilationSuccessInfo: {messages: [`You application is running here http://localhost:5173`],}}),],

3. devServer 网络/服务相关配置

官网详细说明

• 配置启动后监听的端口号,通过pnpm dev启动项目后,浏览器中端口号

  devServer: {port: 5173, // 端口号},

4. stats 控制台信息如何显示

官网的详细说明
作用: 控制台信息如何显示

• 只有在错误时展示信息

stats:"errors-only",

5. module.rules配置预加载器

官方的详细说明

• webpack原生只认识js和json文件,遇到其他类型文件时通过rules中配置规则,找对应的预加载器,把所有的文件都解析成js

• 在rules中有多少loader,就需要pnpm安装多少loader

  module: {rules: [// 以.vue结尾的文件,指定使用vue-loader加载器来处理{test: /\.vue$/,use: "vue-loader",},// 以.css结尾的文件,指定使用css-loader和style-loader加载器来处理// use中的loader是倒序执行的,不能乱排顺序{test: /\.css$/,use: ["style-loader", "css-loader"],},// 以.ts结尾的文件,ts-loader加载器来处理// {//   test: /\.ts$/,//   use: [//     {//       loader: "ts-loader",//       options: {//         configFile: path.resolve(process.cwd(), "tsconfig.json"),//         appendTsSuffixTo: [/\.vue$/],//       },//     },//   ],// },{test: /\.ts$/,loader: "ts-loader",options: {configFile: path.resolve(process.cwd(), "tsconfig.json"),appendTsSuffixTo: [/\.vue$/],},},],},

6. 外部扩展(Externals)

代码:

  externals: {vue: "Vue",},

• 使用上述代码后,打包的文件中将不包含vue,在运行打包文件index.html会报错
  
• Vue给我们提供了CDN的引入方式:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

将上述代码插入到指定的模板文件index.html中再打包就可以运行了.

• 优点:有效的减少打包后的体积，减少服务器的压力
• 缺点:vue的相关文件都会从网络下载,会增加网络负担,如果网络传输速度不够快,直接影响使用者的体验