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
>