VUE3学习 第九章 webpack 构建Vue3项目、vue3性能优化、Vue3 Web Components、Vue3 响应式原理_vue3 组件开发与pack

一、webpack 构建 Vue3项目（纯手写 不用cli）

为什么要手写webpack 不用cli （脑子有病）并不是 其实是为了加深我们对webpack 的了解方便以后灵活运用webpack 的技术

1. 初始化项目结构（跟cli 结构保持一致）

1. 创建 publi 文件夹
   下面创建 index.html 文件 然后初始化一下 ! 然后改一下 title 标签的内容名称，一般与项目名称一样即可
2. 创建 src 文件夹
   src文件夹 下面 创建 App.vue main.ts 文件
3. npm init -y 创建 package.json 文件
   创建的 package.json文件 需要添加 dev 和 build 打包命令（注意： package.json 文件中 不能写 // 注释 打包会报错）

  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
1
2
3
4
5
6

4. tsc --init 创建 tsconfig.json 文件 （如果没有 tsc 可以用 npm i -g typescript）
5. 创建 webpack.config.js 文件
6. 安装 webpack 和 webpack-cli 依赖 以及 webpack 启动 dev-server 等。

npm add webpack
npm add webpack -li // 注意 安装 3以上的版本
npm add webpack-dev-server  // 启动dev 的环境
npm add html-webpack-plugin // webpack  html模板插件
1
2
3
4

7. 写好 webpack.config.js 文件后 就可以打包了 npm run build

const {
    Configuration } = require('webpack') // 本来 没有智能提示的  不过可以通过注解的形式，就可以有智能提示了
const path = require('path') // 引入nodejs 的path
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入 html 模板插件 配置模板


const {
    CleanWebpackPlugin } = require('clean-webpack-plugin') // 清空dist文件使用的插件
const {
    VueLoaderPlugin } = require('vue-loader/dist/index'); // 这个插件是 为了 webpack 能够去识别 template 组件的

const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin"); // 美化打包样式的


/**
 *  @type {Configuration}
 */
const config = {
    // 本来这里是没有智能提示的
    mode: "development", // 指定 打包模式   开发环境打包出来的代码是不会压缩的   如果需要压缩的  需要用生产模式 production
    entry: "./src/main.ts", // 入口文件 注意 如果是TS写的 就是 main.ts
	module: {
   
		rules: [  // 放在 rules 中 都是处理文件的
			{
   
				test: /\.vue$/, //解析vue 模板
                use: "vue-loader"
			}
		]
	},
	output: {
    // 出口
        filename: '[hash].js', // 打完包后的文件名
        path: path.resolve(__dirname, 'dist') // 拼接一下 dirname 输出位置
    },
	resolve: {
   
        alias: {
   
            "@": path.resolve(__dirname, './src') // 别名
        },
        extensions: ['.js', '.json', '.vue', '.ts', '.tsx'] //识别后缀
    },
    stats:"errors-only", //取消提示  
    devServer: {
     // 一些端口 跨域之类的配置
        proxy: {
   },
        port: 9001,
        hot: true,
        open: true,
    },
    externals: {
     // 性能优化的
        vue: "Vue" //CDN 引入
    },
    plugins: [  // 放在 plugins 中 都是插件
        new htmlWebpackPlugin({
   
            template: "./public/index.html" // 指定一下模板的位置
        })，
        new CleanWebpackPlugin(), //打包清空dist
        new VueLoaderPlugin(), //解析vue
        new FriendlyErrorsWebpackPlugin({
   
            compilationSuccessInfo:{
    //美化样式
                messages:['You application is running here http://localhost:8080']
            }     
        })

    ]
}

module.exports = config
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

8. 装一下 vue npm add vue（直接创建的最新的版本） 然后 去main.ts 入口文件中引入 （注意 因为是手写的 所以需要去 pubilc 下 添加一个 id等于 app 的 div 作为挂载点）

import {
    createApp } from 'vue';
import App from './App.vue'   // 如果 ts 无法识别 vue文件  需要去声明一下  在 src 下面 创建一个 env.d.ts 的文件


createApp(App).mount('#app') // 挂载点  由于是手写的  所以需要去 pubilc文件下的html文件的body中创建一个 div 给个 id 叫app 作为挂载点 到时候会渲染到这个地方
1
2
3
4
5
6

// src 下 env.d.ts 声明文件
declare module "*.vue" {
   
  import {
    DefineComponent } from "vue"
  const component: DefineComponent<{
   }, {
   }, any>
  export default component
}
1
2
3
4
5
6
7
8
9
10

9. 这时 直接 打包会报错 因为webpack 无法解析 template 所以需要添加新的插件 (安装完以后 需要去 webpack.config.js 中配置使用，具体看上面的代码)
   如果之后还有可能会报错，应该是我们还没支持ts功能，但是 app.vue的模板中 有 lang=“ts” 删了就好了

	npm add vue-loader@next
	npm add @vue/compiler-sfc
1
2

10. 此时还需要一个插件，因为dist中的文件不会自动删除，所以每次打包dist里面都会添加文件 所以需要一个 npm add clean-webpack-plugin 下载好后 直接去webpack.config.js 中注册使用就可以了
11. 此时已经可以使用 npm run dev 去热更新写代码了
12. 然后 可以去 webpack.config.js 配置 resollve
    比如： alias 可以去修改 文件名的别名
    extensions 可以自动添加文件名的后缀

resolve: {
   
        alias: {
   
            "@": path.resolve(__dirname, './src') // 别名
        },
        extensions: ['.js', '.json', '.vue', '.ts', '.tsx'] //识别后缀
    },
1
2
3
4
5
6
7
8

13. 由于 webpack 不支持 css 和 style 所以 需要继续下载 load 去解析, 下载好后 去 webpack.config.js 中 rules中配置

	npm add css-loader
	npm add style-loader

     		{
   
                test
1
2
3
4
5