项目初始化

pnpm webpack5 vue3 scss

1. pnpm 初始化package.json

> pnpm init

{
  "name": "webpack-vue3-prod",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.4.1"
}

2. 基础依赖安装

1）webpack webpack-cli

bash

pnpm add -D webpack webpack-cli

2）vue

bash

pnpm add vue

3）typescript

bash

pnpm add -D typescript

3. 构建项目结构

1）public/ndex.html

html

# 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>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

入口文件 src/main.ts

# src -> main.ts
import { createApp } from "vue";

import App from "./App.vue";

createApp(App).mount("#app");

入口页面src/App.vue

vue

<template>
  <div>
    Hello webpack5-vue3-ts!
  </div>
</template>

<script setup lang="ts">
</script>

ts配置文件ts.config.json

运行 npx tsc --init 命令自动生成tsconfig.json 文件后修改一下

json


{
  "compilerOptions": {
    "target": "ESNext", // 编译目标版本
    "module": "ESNext", // 使用 ESNext 模块系统
    "lib": ["ESNext", "DOM", "DOM.Iterable"], // 编译时包含的库
    "skipDefaultLibCheck": true, // 跳过类型检查
    "useDefineForClassFields": true, // 使用 class fields 的新语法
    "moduleResolution": "bundler", // 使用 bundler 模块解析策略
    "esModuleInterop": true, // 允许默认导入非 ES 模块
    "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中默认导入
    "resolveJsonModule": true, // 允许导入 JSON 文件
    "isolatedModules": true , // 将每个文件作为单独的模块处理
    "jsx":"preserve", // JSX 语法的处理方式

    "strict": true, // 启用所有严格类型检查选项 
    "noUnusedLocals": true, // 禁用未使用的局部变量
    "noUnusedParameters": true, // 禁用未使用的参数
    "noFallthroughCasesInSwitch": true, // 禁用 switch 语句中的 fallthrough 情况
  },
  "include": [
    "src/**/*.ts", 
    "src/**/*.js", 
    "src/**/*.d.ts", 
    "src/**/*.vue", 
  ],
  "exclude": ["node_modules", "dist", "build"],
}

配置vue类型文件src/shims.vue.d.ts

有其他模块类型申明都写到里面

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

4. 创建webpack构建的配置目录文件

textile

build/webpack.base.js     // 公共配置
build/webpack.dev.js      // 开发环境专用
build/webpack.prod.js     // 生产打包专用

5. hash技术知识回顾

名称	含义	何时会改变
hash	基于整个构建过程生成的全局哈希值	只要项目里有任何文件被修改，重新构建时 hash 值就会改变
chunkhash	依据每个入口文件及其依赖的模块生成的哈希值。不同的入口文件会有不同的 chunkhash 值。	当某个入口文件及其依赖的模块内容发生改变时，该入口文件对应的 chunkhash 值会改变
contenthash	根据文件内容生成的哈希值。每个文件都有独立的 contenthash 值，只要文件内容不变，其 contenthash 值就不会改变	当文件内容发生改变时，contenthash 值会改变

添加git

运行 git init
创建.gitignore 忽略文件

bash


node_modules
dist/

最终文件层级

项目初始化 ​

1. pnpm 初始化package.json ​

2. 基础依赖安装 ​

1）webpack webpack-cli ​

2）vue ​

3）typescript ​

3. 构建项目结构 ​

4. 创建webpack构建的配置目录文件 ​

5. hash技术知识回顾 ​

添加git ​

最终文件层级 ​

项目初始化

1. pnpm 初始化package.json

2. 基础依赖安装

1）webpack webpack-cli

2）vue

3）typescript

3. 构建项目结构

4. 创建webpack构建的配置目录文件

5. hash技术知识回顾

添加git

最终文件层级