邂逅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将返回当前工作目录的绝对路径

javascript 复制代码

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的官方文档是

webpackhttps://webpack.js.org/DOCUMENTION是文档详情，也是我们最关注的

Webpack的运行是依赖Node环境的，所以我们的电脑上必须要有Node环境

先安装Node.js同时会安装npm

webpack的安装分为webpack和webpack-cli，cli是在命令行里使用webpack必备的一个东西

首先创建个文件index.js:

javascript 复制代码

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()

有的浏览器不支持箭头函数，不打包难以运行这个，所以先

bash 复制代码

npm init -y

创建一个配置文件，再进行一个webpack的安装：

javascript 复制代码

npm install webpack webpack-cli

加个-D是开发时依赖（用户界面不需要有webpack）

打包的命令：

bash 复制代码

npx webpack

打包后可以生成一个main.js:

javascript 复制代码

(()=>{"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")})();

打包后可以正确运行代码：

打包的时候也可以进行重命名：

javascript 复制代码

webpack --entry ./src/main.js --output-filename bundle.js

这就是把文件成功的重命名，但是这个每一次运行都这样很麻烦，我们可以通过写webpack的配置文件（webpack.config.js）来简化操作

javascript 复制代码

module.exports = {
    entry: "./src/index.js",
    output:{
        filename:"bundle.js",
        path: path.resolve(__dirname,"./build")
    }
}

写完配置文件后就可以npx webpack来打包了，如果文件名不是默认的那个的话，就可以加个--config 文件名的选项，帮助webpack找到我们写的配置文件

如果还是觉得麻烦，可以直接在package.json里面加一个scripts，把命令命名一下，就像这样：

javascript 复制代码

{
  "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"
  }
}