小满视频
- 很多解释使用通义灵码搜的,通义灵码的搜索结果也是有错误的
- 全程使用pnpm包管理工具，和npm的用法基本一样
学习总结
1. 多看看webpack官网
2. webpack的作用：配置一堆东西，达到运行程序的目的
3. 无论什么东西都转成js，然后插入到一个空空的html文件中运行
4. webpack就是个管理者，管理着一堆loader，一堆loader的作用就是把自己负责的东西弄成js
手动搭建Vue项目,使用webpack4
- 手动构建webpack基本环境
- 1. 初始化node项目
- 2. 生成TypeScript项目
- 3. 安装webpack
- 4. 安装webpack-cli
- 5. 安装webpack-dev-server
- 6. 安装html-webpack-plugin
- 7. 安装Vue
- 8 安装vue-loader
- 9 安装clean-webpack-plugin
- 10. 结果
- 小结:
- 项目目录树
- 各文件代码
- 1. webpack.config.js
- 2. tsconfi.json
- 3. package.json
- 4. main.ts
- 5. end.d.ts
- 6. App.vue
- 7. /public/index.html
- webpack.config.js中的其他配置项
- 1. resolve解析器
- alias:设置别名
- extensions:省略后缀名
- 2. plugin 插件
- 3. devServer 网络/服务相关配置
- 4. stats 控制台信息如何显示
- 5. module.rules配置预加载器
- 6. 外部扩展(Externals)
手动构建webpack基本环境
webpack官网链接
1. 初始化node项目
- 初始化一个 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项目
- 安装typescript
pnpm i typescript -g
- 生成 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 主要完成以下几项工作：
- 解析和处理命令行参数：webpack-cli 负责解析用户在命令行中输入的参数，包括配置文件路径、打包模式、插件等信息。通过解析这些参数，webpack-cli 确定如何执行 Webpack 相关的操作。
- 载入并执行 Webpack 配置：webpack-cli 负责读取并解析指定的 Webpack 配置文件（通常是 webpack.config.js）。通过读取配置文件，webpack-cli 知道如何进行模块打包、资源处理等操作。
- 调用 Webpack API：通过调用 Webpack 提供的 API，webpack-cli 将用户输入的参数和配置转化为具体的 Webpack 打包操作。webpack-cli 可以执行 Webpack 的构建、开发服务器启动、打包分析等功能。
- 提供辅助功能：除了执行 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：用于声明一个模块的类型定义- declare module “*.vue”: 声明一个模块，该模块匹配所有的 .vue 文件。
- import type {DefineComponent} from ‘vue’: 导入 DefineComponent 类型，这是 Vue.js 中的一个类型，用于表示 Vue 组件。
- 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部分工作流程:- 调用
@vue/compiler-sfc会解析文件，提取每个语言块， - 通过标签中
lang="ts"或lang="scss"中lang的特性以及 webpack 配置中的规则自动推断出要使用的预处理(loader) vue-loader调用ts-loader预处理器,处理<script>部分;调用scss-loader预处理器,处理<style>部分- 最后将他们组装成一个 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')}},__dirname是 Node.js 中的一个全局变量，用于表示当前文件所在的目录的绝对路径- 在
import或require语句中使用@时,相当于使用当前文件的路径/src
extensions:省略后缀名
resolve: {extensions: ['.tsx', '.ts', '.js'] // import 时，可以省略后缀名},
- 如需导入文件
/src/views/index.js,可以不写后缀import ex from “src/views/index” - 假如目录中有同名文件
/src/views/index.ts,按照extensions给定的顺序导入的是ts文件
2. plugin 插件
作用: 各种方法修改webpack的构建过程,达到各种各样的目的
- 美化在构建过程中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的相关文件都会从网络下载,会增加网络负担,如果网络传输速度不够快,直接影响使用者的体验
