Vue的自学之路（三）

本次学习使用 yarn 参考连接 简介 | Yarn - JavaScript 软件包管理器 | Yarn中文文档 - Yarn中文网

2.0 环境准备

1. 初始化包环境

在项目的根目录打开cmd命令符，输入：

yarn init

并且按照要求填写对应的信息，大部分默认回车就行，如下图：

2. 安装依赖包

然后在根目录终端命令如下：

yarn add webpack webpack-cli -D

3. 配置script（自定义命令）

•  然后在 package.json 配置一个自定义的命令 代码如下：( scripts,webpack 为固定写法 build为自定义名称也可以写别的，但不建议)
• 添加  "type": "module" ES6语法

{
       
  "type": "module",
  "name": "base",
  "version": "1.0.0",
  "main": "index.js",
  "author": "hongbing",
  "license": "MIT",
  "dependencies": {
       
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "scripts": {
       
    "build": "webpack"
  }
}

 2.1 webpack 基础使用

需求：2个js文件 => 打包成1个js文件

分析步骤：

①：新建 src 文件夹下的资源

②：add.js - 定义求和函数并导出

③：index.js - 引入add模块并使用函数输出结果

④：执行‘yarn build’ 自定义命令，进行打包(确保终端路径在src的父级文件夹)

 ⑤：打包后默认生成 dist 和 main.js 观察其中代码

2.2 webpack的再次打包

需求：代码更多后，如何打包？

分析：

①：src下新建tool/tool.js

②：定义数组求和函数导出

③：index.js - 引入tool模块的函数并使用，打印结果

④：执行“yarn build” 自定义命令，进行打包(确保终端路径在src的父级文件夹)

⑤：打包后默认生成dist和main.js，观察其中代码

步骤：

1. 确保在 src/index.js 引入和使用‘

2. 重新执行 yarn build 打包命令

3.0 webpack的入口和出口

配置文档：概念 | webpack 中文文档

1. 新建 webpack.config.js

2. 填入配置

3. 修改入口文件名

4. 打包观察效果

注意：