You need know something from Xcode 9

目录

1. yarn包管理器

1.1 yarn 是什么, 有什么用?

1.2 yarn的使用

​​​​​​2. webpack基本概述

2.1 webpack是什么？

2.2 什么是打包？

2.3 webpack能做什么？

3. webpack基本使用步骤

3.1 webpack基本使用步骤

3.2 package.json 中 scripts 的使用

3.3 webpack的基本配置

3.4 yarn build执行流程图

4. webpack插件和loader

4.1 自动生成html - html-webpack-plugin 插件

4.2 webpack处理css文件 - css-loader

4.3 webpack处理 less 文件 - less-loader

4.4 webpack处理图片 - 内置asset模块

4.5 webpack处理字体图标 - 内置asset模块

4.6 webpack处理高版本语法 - babel语法降级

5. webpack开发服务器配置

5.1 webpack-开发服务器

5.2 webpack-开发服务器-端口号配置

1. yarn包管理器

1.1 yarn 是什么, 有什么用?

快速、可靠、安全的 依赖管理工具 。和 npm 类似, 都是 包管理工具 , 可以用于 下载管理依赖包， 比 npm 下载包， 更 稳定 、 快速

1.2 yarn的使用

1.2.1下载安装

windows本推荐通过软件包安装

下载地址: https://yarn.bootcss.com/docs/install/#windows-stable

mac本推荐通过命令全局安装 sudo npm i yarn -g

1.2.2  使用yarn的命令装包

• 初始化 yarn init 或 yarn init -y
• 添加依赖 yarn add [package]@[version]
• 移除包 yarn remove [package]
• 安装项目全部依赖 yarn 或者 yarn install
• 全局命令
  • 全局安装 yarn global add [package]
  • 全局卸载 yarn global remove [package]
  • 全局安装路径 yarn global bin

​​​​​​2. webpack基本概述

2.1 webpack是什么？

webpack是一个基于 NodeJS 的 静态模块打包器（HTML，CSS，JS，图片等资源都属于静态模块）

2.2 什么是打包？

打包基本认知：将多个文件 压缩 合并 处理的过程，就可以称之为是打包

好处：可以 减少请求次数 ， 减轻服务器压力，加快页面访问速度 。

2.3 webpack能做什么？

明确：webpack是 基于NodeJS 的 打包工具。

①  合并压缩 ：将 html/css/js/图片等， 进行 资源 合并压缩 处理（打包）

②  语法转换：

        less / sass / stylus => css

        es6 / es7 => es5 / es3

        typescript => 原生js

        ...

③  提供开发服务器： 提供一个开发服务器，监测代码变化，实时打包，实时刷新浏览器 （ 提高开发效率 ）

3. webpack基本使用步骤

3.1 webpack基本使用步骤

1. 新建项目文件夹，src/index.js
2. 初始化 yarn init -y
3. 安装依赖 yarn add webpack webpack-cli -D
4. package.json 中，配置 scripts（自定义命令） ​​​​​​​​​​​​​

目录的说明

- dist 目录 ：存放打包后代码的目录

- src目录 ：存放源代码的目录

3.2 package.json 中 scripts 的使用

1. 配置命令：

         在package.json 文件中 ，可以 配置 scripts , 配置我们自己在终端的常用命令

2. 执行脚本：

         npm run 命令名 => npm run pp

        使用yarn： yarn 命令名 ，不加 run => yarn pp

3.3 webpack的基本配置

webpack基本配置 - 配置入口，出口，模式

官方参考文档： https://webpack.docschina.org/concepts/

1. 入口 entry

说明: 配置入口文件，从哪个文件开始打包

2. 出口 output

说明: 配置输出文件，打包到哪里去

3. 模式 mode：

说明：打包模式

取值：

（1）production（生产环境， 代码压缩 ）

（2）development （开发环境， 代码不压缩 ）

注意 : webpack 基于 node, 所以导出 , 遵守 CommonJS 规范

3.4 yarn build执行流程图

注意: 所有要被打包的资源都要跟入口产生直接/间接的引用关系

4. webpack插件和loader

4.1 自动生成html - html-webpack-plugin 插件

1. html-webpack-plugin 这个插件的作用？ （webpack插件）

打包后，会帮我们 自动 将 public/index.html 拷贝到 dist 下，且会 自动引入 打包后的文件

2. html-webpack-plugin 插件怎么使用？

配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/

（1）下载插件

        yarn add html-webpack-plugin -D

（2）导入插件 (webpack.config.js)

        // 引入自动生成 html 的插件

        const HtmlWebpackPlugin = require('html-webpack-plugin')

（3）配置插件 (webpack.config.js)

        plugins: [

           new HtmlWebpackPlugin({ template: './public/index.html' })

        ]

4.2 webpack处理css文件 - css-loader

举例：现在页面包含了 html 和 js，但是没有 css ，希望添加一点css，处理掉小圆点样式

目标：编写css代码，去掉小圆点，让webpack打包处理

1.  新建 - src/css/index.css
2.  编写去除li圆点样式代码
3.  (重要) 一定要引入到入口才会被webpack打包
4.  执行打包命令观察效果

​​​​​​​报错: 因为webpack默认只能处理js文件

css-loader 文档: https://webpack.docschina.org/loaders/css-loader/

style-loader文档: https://webpack.docschina.org/loaders/style-loade/

编写css文件代码src/css/index.css，在main.js中导入，打包运行，会发现报错了：

原因：

        webpack默认只认识 js 文件和 json文件 ！不认识 css 文件，如果要打包处理 js 之外的静态资源，需要配置 loader 来加载预处理文件

明确：要加载处理 css => 需要配置对应的 loader => css-loader

配置 css-loader 的步骤：

1. 安装依赖 yarn add style-loader css-loader -D

2. 配置内容

4.3 webpack处理 less 文件 - less-loader

目标：编写 less 代码，让webpack打包处理 less (需要配置 less-loader)

less-loader文档: https://webpack.docschina.org/loaders/less-loader/

配置 less-loader 的步骤：

1. 新建src/less/index.less – 设置li字体大小
2. 把index.less引入到入口文件
3. 安装依赖 yarn add less less-loader -D
4. 配置内容（针对less配置）
5. 打包观察效果

4.4 webpack处理图片 - 内置asset模块

1. 在src/assets/准备图片文件
2. 在index.less对body设置背景图片
3. 在入口导入图片文件, 设置到img标签插入到body
4. 打包观察效果

报错: 因为webpack无法自己处理图片文件

如果要 解析图片等资源 ，需要用到 webpack 5 内置的 asset 资源处理模块， 已集成，无需安装。

官网地址： https://webpack.docschina.org/guides/asset-modules/

配置 rules 内容：

注意：

（1）对于小于 8k 的图片， 会自动转 base64 字符串 （节约请求次数，成本：放大约30%的图片体积大小）

（2）对于大于 8k 的图片， 会生成单独文件引入 。

配置图片的打包输出目录：

（默认是直接输出到了 dist 根目录, 可以通过 generator 进行配置）

4.5 webpack处理字体图标 - 内置asset模块

1. src/assets 下 放入fonts字体相关文件夹(素材里)
2. src/main.js 引入 assets/fonts/iconfont.css
3. src/main.js 创建一个i标签, 使用字体图标标签添加到body上
4. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)
5. 打包后运行网页观察效果

字体图标 和 图片的配置一致，也是用内置的asset模块处理（同样：目录可以通过 generator 进行配置）

4.6 webpack处理高版本语法 - babel语法降级

es6新版本的语法很好用 ，例如：let，const，箭头函数...，但是， es6新版本语法是有兼容性的 。

如果想用高版本的新语法怎么办  => babel语法降级

babel官网: https://www.babeljs.cn/

babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/

babel: 一个javascript编译器, 把 高版本js语法 降级处理 输出兼容的 低版本语法

babel-loader: 可以让webpack转译打包的js代码

步骤：

1. 在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
2. 安装包：yarn add -D babel-loader @babel/core @babel/preset-env
3. 配置规则

5. webpack开发服务器配置

5.1 webpack-开发服务器

问题: 每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 比较费时

原因:

• 从0构建依赖
• 从电脑磁盘，读取对应的文件到内存, webpack开始加载
• 再用对应的 loader 进行处理
• 将处理完的内容, 输出到电脑磁盘，指定目录

解决:

         起一个开发服务器 , 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用

webpack开发服务器：把代码运行在 内存 中, 保存自动更新 , 实时 返回给浏览器显示

使用步骤：

1. 下载： yarn add webpack-dev-server -D

2. package.json 配置scripts

3. 启动服务器开发： yarn serve

5.2 webpack-开发服务器-端口号配置

webpack-dev-server配置文档:

https://webpack.docschina.org/configuration/dev-server/#devserverafter

1. 在webpack.config.js中添加如下配置即可

2. 重新启动webpack开发服务器观察效果