邂逅Webpack和打包过程
前端开发方向
目前国内的前端开发 主要使用Vue和React
一般你写个项目，过程就是：npm/yarn --> webpack架构 --> Vue/React框架
而针对Vue和React都有脚手架的，脚手架是基于webpack搭建的
你写.jsx或者ts之类的浏览器是不认识的，所以要对已经写好的代码进行打包以生成html、css和js
常见的打包工具有gulp、rollup、webpack（架构和生态都很好）、vite
打包工具里面也都是js代码，是执行一些文件操作的，而这个操作又依赖于node
内置模块path
这个模块对path十分重要
path模块对于路径和文件进行了处理，提供了很多好用的方法
在不同操作系统的路径分隔符不一样，windows上是\或者\\
mac和Linux则是/
所以路径不是写死的，而是由path模块根据对应的os生成的
POSIX（可移植操作系统接口）：Linux和Mac都实现了POSIX接口
Windows部分电脑实现了POSIX接口
path常见的API
从路径中获取信息：
dirname：获取文件的父文件夹
basename：获取文件名
extname：获取文件拓展名
如果对多个路径进行拼接的话，就可以用path.join，不同的操作系统可能使用的是不同的分隔符
如果是绝对路径拼接的话，那就是path.resolve
这个方法会把一个路径或者路径片段的序列解析成一个绝对路径
给定的路径序列是从右往左被处理的，后面的每一个path依次被解析，直到构造完成一个绝对路径
在处理完所有给定的path段之后，还没有生成绝对路径，则使用当前的工作目录
生成的路径被规范化并删除尾部斜杠，零长度path段被忽略
如果没有path传递段，path.resolve将返回当前工作目录的绝对路径
const path = require('path');const filePath = "C://abc/cba/nba.txt"//可以从一个路径中获取一些信息
console.log(path.dirname(filePath));
console.log(path.extname(filePath));
console.log(path.basename(filePath));// 将多个路径拼接在一起
const path1 = "/abc/cba"
const path2 = "../why/kobe/james.txt"
console.log(path.join(path1, path2));// 将多个路径拼接在一起，最后返回一个绝对路径
console.log("----------resolve---------")
console.log(path.resolve('./abc/cba', './why/kobe','./abc.txt'));生成绝对路径是需要的，因为有的地方只能传绝对路径
认识webpack
随着前端的快速发展，前端的开发已经变的越来越复杂了
比如使用模块化的方式进行开发
也会使用一些高级的特性来加快我们开发的效率或者安全性（ES6+、TS、sass、less）
还会希望实时的监听文件的变化并且反映到浏览器上，提高开发效率，还有对代码进行压缩，合并以及其他相关的优化
但是很多前端开发者都不用在乎这些，因为有Vue、React和脚手架的存在
脚手架依赖webpack
webpack是一个静态（最终可以将代码打包成静态资源，部署到静态服务器）的模块化（支持各种模块化开发，ES_Module、CommonJS、AMD）打包（帮助我们进行打包）工具，为现代（因为现代前端发展面临各种各样的问题，所以webpack出现发展了）的JS应用程序
Vue项目加载的文件有哪些呢？
有JS的打包：
将ES6转换成ES5的语法
TS的处理将其转换成JS
有CSS的处理：
CSS文件模块的加载、提取
Less、Sass等预处理器的处理
资源文件img、font：
图片文件img的加载
字体font文件的加载
还打包了HTML资源文件和处理vue项目的SFC文件.vue文件
Webpack的使用前提
webpack的官方文档是
webpack
https://webpack.js.org/DOCUMENTION是文档详情，也是我们最关注的
Webpack的运行是依赖Node环境的，所以我们的电脑上必须要有Node环境
先安装Node.js同时会安装npm
webpack的安装分为webpack和webpack-cli，cli是在命令行里使用webpack必备的一个东西
首先创建个文件index.js:
import {sum} from './utils/math'const message = 'Hello World!'sum(20,30)
sum(10,30)console.log(message.length)const bar= ()=>{console.log('bar function execution')
}bar()
有的浏览器不支持箭头函数，不打包难以运行这个，所以先
npm init -y创建一个配置文件，再进行一个webpack的安装：
npm install webpack webpack-cli加个-D是开发时依赖（用户界面不需要有webpack）
打包的命令：
npx webpack打包后可以生成一个main.js:
(()=>{"use strict";function o(o,n){return o+n}console.log(o(20,30)),console.log(o(10,30)),console.log(12),console.log("bar function execution")})();打包后可以正确运行代码：
打包的时候也可以进行重命名：
webpack --entry ./src/main.js --output-filename bundle.js这就是把文件成功的重命名，但是这个每一次运行都这样很麻烦，我们可以通过写webpack的配置文件（webpack.config.js）来简化操作
module.exports = {entry: "./src/index.js",output:{filename:"bundle.js",path: path.resolve(__dirname,"./build")}
}写完配置文件后就可以npx webpack来打包了，如果文件名不是默认的那个的话，就可以加个--config 文件名 的选项，帮助webpack找到我们写的配置文件
如果还是觉得麻烦，可以直接在package.json里面加一个scripts，把命令命名一下，就像这样：
{"name": "webpackbasic","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"webpack --config wk.config.js"},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"webpack": "^5.99.9","webpack-cli": "^6.0.1"}
}