0. 介绍
- 包管理工具
- npm/yarn/pnpm
- 打包工具
- webpack
- Gulp
- Rollup
- 确定框架：
- Vue/React/Angular(optional)
- 脚手架
1. 认识webpack工具
1.1 内置模块path
- path模块用于对路径和文件进行处理，提供了很多好用的方法。
- 我们知道在Mac OS、Linux和window上的路径时不一样的
- window上会使用
\或者\\来作为文件路径的分隔符，当然目前也支持/; - 在MacOS、Linux的Unix操作系统上使用
/来作为文件路径的分隔符; - 那 么如果我们在window上使用
\来作为分隔符开发了一个应用程序，要部署到Linux上面应该怎么办呢? 显示路径会出现一些问题; - 所以为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用path模块;
- window上会使用
- 我们知道在Mac OS、Linux和window上的路径时不一样的
- 可移植操作系统接口(英语:Portable Operating System Interface,缩写为OSIX)
- Linux和MacOS都实现了POSIX接口;
- Window部分电脑实现了POSIX接口;
1.1.1 path常见的API
- 从路径中获取信息
- dirname:获取文件的父文件夹;
- basename:获取文件名;
- extname:获取文件扩展名;
- path.resolve()方法会把一个路径或路径片段的序列解析为一个绝对路径;
- 给定的路径的序列是从右往左被处理的，后面每个path被依次解析，直到构造完成一个绝对路径;
- 如果在处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录;
- 生成的路径被规范化并删除尾部斜杠，零长度path段被忽略;
- 如果没有path传递段,path.resolve()将返回当前工作目录的绝对路径;
1.1.2 在webpack中的使用
- 在webpack中获取路径或者起别名的地方也可以使用
1.2 认识webpack
- 事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了:
- 比如开发过程中我们需要通过模块化的方式来开发;
- 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码;
- 比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率;
- 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化;
- 等等.....
- 但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题:
- 这是因为目前前端开发我们通常都会直接使用三大框架来开发:Vue、React、Angular;
- 但是事实上，这三大框架的创建过程我们都是借助于脚手架(CLI)的;
- 事实上Vue-CLl、create-react-app、Angular-Cll都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的;
1.3 脚手架依赖webpack
- 事实上Vue-CLl、create-react-app、Angular-Cll都是基于webpack
1.4 webpack到底是什么
- webpack is a static module bundler for modern JavaScript applications.
- 为现代JS应用程序的静态模块化打包工具
- 我们来对上面的解释进行拆解:
- 打包bundler:webpack可以将帮助我们进行打包，所以它是一个打包工具
- 静态的static:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器);
- 模块化module:webpack默认支持各种模块化开发,ESModule、CommonJS、AMD等;
- 现代的modern:我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展;
1.5 Vue项目加载的文件有哪些呢?
- JavaScript的打包:
- 将ES6转换成ES5的语法;
- TypeScript的处理，将其转换成JavaScript;
- 资源文件img、font:
- 图片img文件的加载;
- 字体font文件的加载;
- HTML资源的处理:
- 打包HTML资源文件;
- 处理vue项目的SFC文件.vue文件;
1.6 Webpack的使用前提
- webpack的官方文档是https://webpack.js.org/
- webpack的中文官方文档是https://webpack.docscchina.org/
- DOCUMENTATION:文档详情，也是我们最关注的
- Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境
- 所以我们需要先安装Node.js，并且同时会安装npm
- 我当前电脑上的node版本是v16.15.1，npm版本是8.11.0(你也可以使用nvm或者n来管理Node版本);
- Node官方网站:https://nodejs.org
1.6.1 webpack的安装
-
webpack的安装目前分为两个:webpack、webpack-cli
-
那么它们是什么关系呢?
- 执行webpack命令,会执行node_modules下的
.bin目录下的webpack; - webpack在执行时是依赖webpack-cli的，如果没有安装就会报错;
- 而webpack-cli中代码执行时,才是真正利用webpack进行编译和打包的过程;
- 所以在安装webpack时，我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西)
- 执行webpack命令,会执行node_modules下的
-
npm install webpack webpack-cli -g#全局安装 -
npm install webpack webpack-cli -D# 局部安装
2. webpack基本打包
- 我们可以通过webpack进行打包，之后运行打包之后的代码
- 在目录下直接执行webpack命令
webpack
- 在目录下直接执行webpack命令
- 生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件:
- 这个文件中的代码被压缩和丑化了;
- 另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置;
- 我们发现是可以正常进行打包的，但是有一个问题，webpack是如何确定我们的入口的呢?
- 事实上,当我们运行webpack时,webpack会查找当前目录下的src/index.js作为入口;
- 所以，如果当前项目中没有存在src/index.js文件，那么会报错;
- 当然，我们也可以通过配置来指定入口和出口
npx webpack --entry ./src/main.js --output-path ./build
2.1 创建局部的webpack
- 前面我们直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。
- 第一步:创建package.json文件，用于管理项目的信息、库依赖等
npm init - 第二步:安装局部的webpack
npm install webpack webpack-cli -D - 第三步:使用局部的webpack
npx webpack - 第四步:在package.json中创建scripts脚本，执行脚本打包即可
- 第一步:创建package.json文件，用于管理项目的信息、库依赖等
3. webpack配置文件
- 但是如果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢?
- 比如我们将webpack.config.js修改成了wk.config.js;
- 这个时候我们可以通过--config来指定对应的配置文件;
webpack --config wk.config.js
- 但是每次这样执行命令来对源码进行编译，会非常繁琐，所以我们可以在package.json中增加一个新的脚本
3.1 web pack的依赖图
- webpack到底是如何对我们的项目进行打包的呢?
- 事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件;
- 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等);
- 然后遍历图结构，打包一个个模块(根据文件的不同使用不同的loader来解析);
4. 编写和打包CSS文件
4.1 loader
- 上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢?
- loader可以用于对模块的源代码进行转换;
- 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的;
- 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能;
- 那么我们需要一个什么样的loader呢?
- 对于加载css文件来说，我们需要一个可以读取css文件的loader;
- 这个loader最常用的是css-loader;
- css-loader的安装:
4.2 CSS loader使用方式
- 如何使用这个loader来加载css文件呢?有三种方式:
- 内联方式
- CLI方式(webpack5中不再使用);
- 配置方式;
- 内联方式:
- 内联方式使用较少，因为不方便管理;
- 在引入的样式前加上使用的loader，并且使用!分割;
import "css-loader!../css/style.css"
- CLI方式
- 在webpack5的文档中已经没有了
--module-bind; - 实际应用中也比较少使用，因为不方便管理;
- 在webpack5的文档中已经没有了
- 配置方式
- 配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息:
- module.rules中允许我们配置多个loader(因为我们也会继续使用其他的loader，来完成其他文件的加载)
- 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览;
- module.rules的配置如下:
- rules属性对应的值是一个数组:[Rule]
- 数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性:
- test属性:用于对resource(资源)进行匹配的，通常会设置成正则表达式;
- use属性:对应的值时一个数组:[UseEntry]
- UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
- loader:必须有一个loader属性，对应的值是一个字符串;
- options:可选的属性，值是一个字符串或者对象，值会被传入到Ioader中;
- query:目前已经使用options来替代;
- 传递字符串(如:
use:['style-loader'])是loader属性的简写方式(如:use:[{loader:'style-loader'}]);
- UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
- loader属性:
Rule.use:[{loader}]的简写。
- 配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息:
4.3 style loader
- 我们已经可以通过css-loader来加载css文件了
- 但是你会发现这个css在我们的代码中并没有生效(页面没有效果)。
- 这是为什么呢?
- 因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中;
- 如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader;
- 安装style-loader: npm install style-loader -D
4.3.1 配置style loader
-
那么我们应该如何使用style-loader:
-
在配置文件中，添加style-loader;
-
注意:因为loader的执行顺序是从右向左(或者说从下到上，或者说从后到前的),所以我们需要将style-loader写到css-loader的前面;
use:[
//注意:style-loader在css-loader的前面
{ loader:"style-loader" },
{ loader:"css-loader" }
] -
重新执行编译npm run build，可以发现打包后的css已经生效了:
- 当前目前我们 的css是通过页内样式的方式添加进来的;
- 后续我们也会讲如何将css抽取到单独的文件中，并且进行压缩等操作;
-
5. 编写和打包LESS文件
5.1 如何处理less文件
6. postcss工具处理css
6.1 认识postcss
- 什么是PostCSS呢?
- PostCSS是一个通过JavaScript来转换样式的工具;
- 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置;
- 但是实现这些功能，我们需要借助于PostCSS对应的插件;