内置模块path
path模块用于对 路径和文件 进行处理 提供了很多好用的方法
如果我们在window上使用 \ 来作为分隔符开发了一个应用程序 要部署到linux上面该怎么办
显示路径会出现一些问题 ; 为了屏蔽它们之间的差异,在开发中对于路径的操作我们可以使用path模块
path常见的API
从路径中获取信息
dirname:获取文件的父文件夹
basename:获取文件名
extname:获取文件扩展名
路径的拼接: path.join
拼接绝对路径:path.resolve
path.resolve()方法 把一个路径或路径片段的序列解析为一个绝对路径
给定的路径的序列是从右往左被处理的 后面每个path被依次解析 直到构造完成一个绝对路径
在处理完所有给定path的段之后,还没有生成绝对路径,则使用当前工作目录
生成的路径被规范化并删除尾部斜杠 零长度path段被忽略
如果没有path传递段,path.resolve()将返回当前工作目录的绝对路径
1 认识webpack工具
认识webpack
目前前端的开发已经变得越来越复杂了
如 开发过程中我们需要通过 模块化的方式来开发
如 会使用一些 高级的特性来加快我们的开发效率或者安全性 如ES6+ TS开发脚本逻辑 通过sass less邓方式编写css样式代码
如 开发过程中 还希望 实时的监听文件的变化 并且 反映到浏览器上 提高开发效率
如 开发完成后 还需要将代码进行压缩 合并 以及其他相关优化
但是对于很多的前端开发者来说 不需要思考这些问题 日常开发中 根本没有面临这些问题
因为目前前端开发 通常会直接使用 三大框架来开发:Vue React Angular
事实上,这三大框架的创建过程 都是借助于脚手架(CLI)的
事实上,Vue-CLI create-react-app Angular-CLI都是基于webpack 来帮助我们支持模块化 less TS 打包优化等
脚手架依赖webpack
Webpack到底是什么呢?
官方解释为:webpack is a static module bundler for modern JavaScript applications
webpack是一个静态的模块化打包工具 为现代的JS应用程序
打包bundler:webpack可以将帮助我们进行打包,所以是一个打包工具
静态的static:最终可以将代码打包成最终的静态资源(部署到静态服务器)
模块化module: webpack默认支持各种模块化开发 ES Module CommonJS AMD等
现在的modern:因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发展
Webpack官方图
Vue项目加载的文件有哪些?
JavaScript的打包:
将ES6转换成ES5的语法;
TypeScript的处理,将其转换成JavaScript
Css的处理:
CSS文件模块的加载 提取;
Less Sass等预处理器的处理
资源文件img font
图片img文件及字体font文件的加载
HTML资源的处理:
打包HTML资源文件
处理vue项目的SFC文件.vue文件;
Webpack的使用前提
webpack官方文档:https://webpack.js.org
中文官方文档:https://webpack.docschina.org
DOCUMENTATION:文档详情,也是我们最关注的!
webpack的运行是依赖Node环境的,所以电脑上必须有Node环境
Webpack的安装
webpack的安装目前分为两个:webpack webpack-cli
它们的关系是什么呢?
执行webpack命令 会执行node_modules下的.bin目录下的webpack
webpack在执行时是依赖webpack-cli的,如果没有安装就会报错
webpack-cli中代码执行时 才是真正利用webpack进行编译和打包的过程
所以安装webpack时 我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的 而是类似于自己的vue-service-cli的东西)
2 webpack基本打包
Webpack的默认打包
通过webpack进行打包
在目录下 直接执行 webpack命令
webpack
生成一个dist文件夹,里面存放了一个main.js文件 就是我们打包后的文件;
这个文件中的代码被压缩和丑化
我们发现 代码中存在的ES6语法 如 箭头函数 const等 这是因为默认情况下 webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法 后续我们需要通过babel进来转换和设置
我们发现是可以正常进行打包的,但有一个问题,webpack如何找到我们的入呢?
当我们运行webpack时 webpack会查找当前目录下的 src/index.js作为入口
所以 如果当前项目中没有存在src/index.js文件 那么会报错
当然 我们也可以通过配置 来指定入口和出口
JavaScript npx webpack --entry ./src/main.js --output-path ./build
创建局部的Webpack
前面我们直接执行webpack命令使用的是全局的webpack 如果希望使用局部的按照下面的步骤进行:
1 创建package.json文件 用于管理项目信息 库依赖等
JavaScript npm init
2 安装局部的webpack
JavaScript npm install webpack webpack-cli -D
3 使用局部的webpack
JavaScript npx webpack
4 在package.json中创建scripts脚本,执行脚本打包即可
JavaScript "scripts":{ "build":"webpack" }
3 webpack 配置文件
webpack配置文件
在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的
我们在根目录下创建一个webpack.config.js文件,作为webpack配置文件
JavaScript const path = require('path') // 导出配置信息 module.exports = { entry:"./src/main.js", output:{ filename:"bundle.js", path:path.resolve(__dirname,"./dist") } }
指定配置文件
如果我们的配置文件不是webpack.config.js的名字 而是其他的?
如 我们将webpack.config.js修改成xiong.config.js
这时 我们通过 --config来指定对应的配置文件
JavaScript webpack --config xiong.config.js
但是每次执行命令来对源码进行编译 会很繁琐,所以我们可以在packa.json中增加一个脚本
JavaScript { Debug "scripts":{ "build":"webpack --config xiong.config.js" }, "devDependencies":{ "webpack":"^5.14.0", "webpack-cli":"^4.3.1" } }
Webpack的依赖图
webpack到底是如何对我们的项目进行打包的?
事实上 webpack在处理应用程序时 会根据命令或者配置文件找到入口文件
从入口开始 生成一个依赖关系图 这个依赖关系图 会包含应用程序中所需的所有模块(如 js css 等)
然后遍历图结构,打包成一个个模块(根据文件的不同使用不同的loader来解析)
