01-初识Webpack打包过程

1. 初识Webpack打包工具

目前前端的开发现状

• 模块化开发模式
• 使用高级的特性加快开发效率
• sass、less等方式优化css编写方式
• 实时的监听文件的变化，自动刷新浏览器，提高开发效率
• 项目开发完后，将代码进行压缩、合并以及其他相关的优化

Webpack到底是什么

• Webpack 是一个模块打包器 (bundler)，本身是一个工具
• 在 Webpack 看来，前端所有的静态资源文件都是模块，如 JS / JSON / CSS / IMG / LESS / FONTS 等等，这些文件都会作为模块来处理。
• Webpack 会根据模块之间的依赖关系，进行分析打包，生成最终的静态资源。
• webpack的官方文档是https://webpack.js.org/
• webpack的中文官方文档是https://webpack.docschina.org/

一个真实项目中用到的文件都有哪些

• JavaScript的打包：
  • 将ES6转换成ES5的语法
  • TypeScript的处理，将其转换成JavaScript
• CSS的处理：
  • CSS文件模块的加载、提取
  • Less、Sass等预处理器的处理
• 资源文件img、font：
  • 图片img文件的加载
  • 字体font文件的加载
• HTML资源的处理： -打包HTML资源文件
• 处理vue项目的.vue文件；
• 处理react项目的.jsx文件；

在webpack眼中，一切都是模块，webpack模块打包工具，webpack支持的模块有JS模块，CSS模块，VUE模块，PNG模块，JPG模块.....

2. Webpack的安装与零配置打包

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

• 需要先安装Node.js，并且同时会安装npm
• 老师电脑上的node版本是v16.15.1，npm版本是8.11.0（务必保持一样）

安装

• 在安装webpack时，我们需要同时安装webpack-cli
• npm install webpack webpack-cli –g # 全局安装
• npm install webpack webpack-cli –D # 局部安装

零配置打包

• 默认情况下，不需要做任何配置，都可以打包
• 通过webpack进行打包，之后通过 webpack 命令运行打包之后的代码
• 当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口
• 生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件
• 文件中的代码被压缩和丑化了
• 如果有JS高级语法，webpack也是转化的，也就是默认情况下，webpack只能打包ES6之前的语法
• 指定入口和出口 webpack --entry ./src/main.js --output-path ./build

依赖图

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

3. 局部的webpack

前面我们直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。但是真实开发中，我们不会使用全局的webpack进行打包，我们都是在当前项目中安装webpack。操作步骤如下：

• 第一步：通过 npm init 创建package.json文件
• 第二步：安装局部的webpack npm install webpack webpack-cli -D
• 第三步：使用局部的webpack npx webpack
• 第四步：在package.json中创建scripts脚本，执行脚本打包即可 npm run build

4. Webpack配置文件

五个核心概念

• Entry 入口
  • 入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点依赖的
• Output 出口
  • Output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
• Loader 加载器
  • Webpack 默认只能处理 JS / JSON 文件，如果需要打包其他类型文件，就需要使用对应的 loader 进行处理。例如 css-loader，less-loader，file-loader 等等
  • Loader 本质是 JS 函数，接受源文件内容，返回转换后的结果
• Plugins 插件
  • loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量
• Mode 模式
  • Webpack 主要有两种工作模式，分别是 development 开发模式和 production 生产模式。

在通常情况下，webpack需要打包的项目是非常复杂的，零配置打包，并不能满足我们的要求，一般我们会在项目的根目录下，创建一个webpack.config.js文件，来作为webpack的配置文件。

当然我们也可以不叫webpack.config.js，如果不是webpack.config.js，那么在使用webpack命令时，必须指令webpack的配置文件

• npx webpack --config wk.config.js
• 项目中最常用的是在package.json文件中添加一个脚本，通过npm run build来打包就OK
• 使用npm run build打出来的包，是直接生成到硬盘上的，叫硬盘打包。也就是说，项目开发完毕，需要使用npm run build在硬盘上打好包，把打好包的代码扔到服务器就OK了，服务器上不能放项目源码。
• dist 产出代码 可以直接在浏览器中运行，最终项目上线，也是把dist扔到服务器上。