AwesoLynn

Vue3-demo项目即为先前从0搭建简易vue3项目中搭建的demo

分析

入口文件main.js

1
2
3
4
5

import { createApp } from "vue";//引入Vue3源码
import App from "./App";//引入App.vue组件
const app = createApp(App,{msg:"Hello Vue"})//创建App组件，传递msg参数

app.mount("#app")//渲染app，将其挂载到id=app的节点上

通过在浏览器上不同位置打断点，可以按步骤流程分析Vue源码的实现流程。

步骤

1. 创建目录，使用npm init -y初始化项目

2. 使用npm install -D xxx ...命令安装webpack相关依赖

   • webpack：webpack编译打包核心库

   • webpack-cli：webpack指令库

   • webpack-dev-server：webpack开发者服务框架

   • webpack-chain：webpack配置工具

3. 创建webpack配置文件webpack.config.js

使用命令npm run dev运行时提示报错Cannot find module 'webpack-cli/bin/config-yargs

本地package版本：

1
2
3
4

"webpack": "^5.37.1",
"webpack-chain": "^6.5.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"

webpack-dev-server

用来快速开发应用，仅用于development环境

webpack-dev-server是第三方依赖库，依赖webpack-dev-middleware（负责把webpack打包后的文件存放在内存中供外界访问）。

下载：

1

npm install -D webpack-dev-server --registry https://registry.npm.taobao.org

resolve

选项resolve可设置模块如何被解析

resolve.alias

创建import或require中间request的别名

module

webpack中用require或import引入的都叫module，通过对module选项的配置可以让loader加载对应的模块

noParse

当使用commonjs模块生成，修改src/index.js文件引入library

entry

入口对象entry用于webpack查找开始构建bundle的地方，配置方法有多种形式

默认为：./src/index.js

webpack的编译分几个阶段进行，分别为创建对象阶段run、解析获取module阶段make、module分包阶段seal、输出打包后文件阶段emit

seal阶段

seal阶段主要对modules做分拣、拆包、封装。

查看文件/node_modules/webpack/lib/Compiler.js第675行:

1
2
3
4
5
6
7
8
9
10

compile(callback) {
    // make 阶段开始
    this.hooks.make.callAsync(compilation, err => {
        if (err) return callback(err);
        // make 阶段结束
        compilation.finish(err => {
            if (err) return callback(err);
            // seal 阶段开始
            compilation.seal(err => {
            ...

webpack的编译分几个阶段进行，分别为创建对象阶段run、解析获取module阶段make、module分包阶段seal、输出打包后文件阶段emit

一些定义

• module：webpack中用require或import引入的都叫module

• chunk：module的一个集合，入口文件就算一个chunk

• dependency：包含一个模块的基本信息，用来创建module

• moduleFactory：创建module对象的工厂类

• assets：最后输出的资产文件

webpack是现代JavaScript应用程序的静态模块打包器。通过递归地构建依赖关系图，将应用程序需要的每个模块打包成一个或多个bundle

基础用法

1. 使用npm init命令初始化工程

2. 在src目录创建入口文件index.js

1
2

import $ from 'jquery'; // 引入 jquery 第三方库
$('#app').text('hello webpack!'); // 使用 jquery 输出 hello webpack