前端工程化09-webpack静态的模块化打包工具(未完结)

9.1、开发模式的进化历史

webpacks是一个非常非常的强大的一个工具，相应的这个东西的学习也是有一定的难度的，里边的东西非常的多，里面涉及到的
概念的话也是非常非常的多的。

这个东西既然非常重要，那么在我们前端到底处于怎样的一个地位呢？

有些人学习到这个阶段已经分不清楚了，到底什么是node,什么是npm/什么是webpack,所以我们有必要了解下前端开发的架构图
目前我们前端比较流行的三大框架，Vue/React/Angular/,国内用Angular的非常少，如果公司需要你会，那么可以研究下，如果不
是就没有必要把太多的精力放到、Angular上，本身这个东西的需求比较少，岗位也比较少，那么这个时候你花费更多时间学习
Angular是没有什么太大的回报的，但是不可否认Angular是一个非常优秀的框架，他里边的架构设计也是非常优秀的~后续聊，目
前我们国内用的最多的还是Vue和React我们目前的开发模式已经不是以前的那种模式，我先创建一个index.html，然后写标签写内容，下几个js文件，引入到项目里，在写对应的js,写css什么的现在的模式，假如你现在要开发一个旅游项目，先考虑用什么包管理工具，用npm还是用yarn,之后在确定给你的项目用到的打包工具webpack,然后在当前的架构下边确定用什么前端框架开发，比如Vue,React,Angular,在写具体的代码，有人说了，那我不会搭建这个架构怎么办，这个不需要担心，因为现在，你不管去开发Vue项目还是开发React这个项目，他们都有对应的脚手架来帮助你进行快速开发，所谓的脚手架，不管是Vue的还是React的他们呢都是基于Webpack的。

9.2、Webpack使用Node内置的Path模块

path模块是node的内置模块，通常用于对路径和文件进行处理，提供了很多好用的方法

我们知道在Mac OS、Linux和window上的路径时不一样的

• window上会使用 \或者 \ 来作为文件路径的分隔符，当然目前也支持 /；
• 在Mac OS、Linux的Unix操作系统上使用 / 来作为文件路径的分隔符；

那么如果我们在window上使用 \ 来作为分隔符开发了一个应用程序，要部署到Linux上面应该怎么办呢？

• 显示路径会出现一些问题；
• 所以为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用 path 模块；

可移植操作系统接口（英语：Portable Operating System Interface，缩写为POSIX）

• Linux和Mac OS都实现了POSIX接口；
• Window部分电脑实现了POSIX接口；

9.3、path模块常见的API

从路径中获取信息

• dirname：获取文件的父文件夹；
• basename：获取文件名；
• extname：获取文件扩展名；

路径的拼接：path.join

• 如果我们希望将多个路径进行拼接，但是不同的操作系统可能使用的是不同的分隔符；
• 这个时候我们可以使用path.join函数；

拼接绝对路径：path.resolve

• path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径；
• 给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径；
• 如果在处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录；
• 生成的路径被规范化并删除尾部斜杠，零长度path段被忽略；如果没有path传递段，
• path.resolve()将返回当前工作目录的绝对路径；

9.4、path模块在webpack中的使用

9.5、正确认识webpack

事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：

• 比如开发过程中我们需要通过模块化的方式来开发；
• 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；
• 比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；
• 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；
• 等等

但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：

• 这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；
• 但是事实上，这三大框架的创建过程我们都是==借助于脚手架（CLI）==的；
• 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；

工程化章节会去学习一些webpack的高级特性

9.6、脚手架依赖于webpack

9.7、Webpack到底是什么呢？

我们先来看一下官方的解释：

• webpack is a static module bundler for modern JavaScript applications.

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

• 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
• 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
• 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
• 现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

Webpack官网的图片

9.8、Vue项目加载的文件有哪些呢？

JavaScript的打包：

• 将ES6转换成ES5的语法；
• TypeScript的处理，将其转换成JavaScript；

Css的处理：

• CSS文件模块的加载、提取；
• Less、Sass等预处理器的处理；

资源文件img、font：

• 图片img文件的加载；
• 字体font文件的加载；

HTML资源的处理：

• 打包HTML资源文件；

处理vue项目的SFC文件.vue文件；

9.1、Webpack的使用前提

webpack的官方文档是https://webpack.js.org/

• webpack的中文官方文档是https://webpack.docschina.org/
• DOCUMENTATION：文档详情，也是我们最关注的

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

• 所以我们需要先安装Node.js，并且同时会安装npm；
• 我当前电脑上的node版本是v16.15.1，npm版本是8.11.0（你也可以使用nvm或者n来管理Node版本）；
• Node官方网站：https://nodejs.org/

9.2、Webpack的安装

webpack的安装目前分为两个：webpack、webpack-cli

注意：从webpack4版本开始，你要想安装webpack就必须要同时安装俩东西。这个webpack-cli在用的时候是我们在命令行中使用webpack,必须要用的一个东西,

这个东西的作用是他会识别我们的命令行，假如说你是通过代码的方式来使用webpack的，比如const webpack=require(“webpack”) ,webpack.compile(),编译某

个文件，如果我自己写代码打包，那就不需要webpack-cli,但是我们目前使用webpack都是在命令行输入命令webpack --entry,

为了识别这个命令,都是webpack-cli在做的，

那么它们是什么关系呢？

• 执行webpack命令，会执行node_modules下的.bin目录下的webpack；
• webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
• 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
• 所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

全局安装在那敲命令都能用

那一般来说，是局部安装多还是全局安装多一点

• 一般是局部安装多一点，为什么？

假如说你的电脑里边有仨项目，分别是Vue2的、Vue3的项目、React的项目，这个三个项目都需要进行打包，但是不可能他们依赖的webpack版本完全一样，大概率是不一样的。所以每个项目里边有自己webpack

9.3、创建局部的webpack

前面我们直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。

第一步：创建package.json文件，用于管理项目的信息、库依赖等

npm init

第二步：安装局部的webpack

npm install webpack webpack-cli -D

第三步：使用局部的webpack

npx webpack

第四步：在package.json中创建scripts脚本，执行脚本打包即可

npm run build

9.4、Webpack的默认打包

我们可以通过webpack进行打包，之后运行打包之后的代码

• 在目录下直接执行 webpack 命令
  • webpack

生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件：

• 这个文件中的代码被压缩和丑化了；
• 另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置；

我们发现是可以正常进行打包的，但是有一个问题，webpack是如何确定我们的入口的呢？

• 事实上，当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口；
• 所以，如果当前项目中没有存在src/index.js文件，那么会报错；

当然，我们也可以通过配置来指定入口和出口

#改index.js生成的文件名
npx webpack --entry ./src/main.js --output-filename ./bundle.js
#改生成的dist目录名
npx webpack --entry ./src/main.js --output-filename ./bundle.js  --output-path ./build

但是一般这个目录太长了，我们不会这么写的，都是配置一个配置文件

9.5、Webpack配置文件

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。

我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

继续执行webpack命令，依然可以正常打包

npm run build

const path = require("path")

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

9.6、指定配置文件

但是如果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？

• 比如我们将webpack.config.js修改成了 wk.config.js；
• 这个时候我们可以通过 --config 来指定对应的配置文件；

webpack --config wk.config.js

但是每次这样执行命令来对源码进行编译，会非常繁琐，所以我们可以在package.json中增加一个新的脚本：

之后我们执行 npm run build来打包即可。

9.7、Webpack的依赖图

内容回顾

• 已学习webpack的基本知识，webpack的一个基本打包，webpack的一个基本打包

webpack到底是如何对我们的项目进行打包的呢？

• 事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；
• 从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；
• 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；

webpack处理文件的时候会生成一个依赖图关系图（图结构）互相依赖是图，往下依赖是树结构，webpack默认只是对js来进行打包，但是如果我们想要在我们

的程序里边也包括我的css，图片字体等别的一些资源，这个时候我们就需要通过不同的loader来进行解析。