什么是前端工程化？为什么要进行工程化？在工程化出现之前，前端开发可谓是草莽时代，非常缺乏规范化、流程化，js、css以及其他资源的引入满天飞，项目一旦上了规模，具备了一定的复杂度，代码的引入、资源的加载无法实现科学有效的管理，让开发者难以维护，前端工程化就是来解决由此引发的一系列问题的。

1.如何学习前端工程化

工程化的学习可以简单分为4部分
1.模块化
包括Commonjs、ES Module、AMD、CMD、UMD等等，其中前两个是最常见也最重要的。如果没有模块化，当项目上了复杂度的时候，同时引入的几十上百个JS文件将出现依赖混乱的问题，同时也能解决引入这么多JS之后出现的全局变量污染问题
2.包管理工具
包括npm、cnpm、pnpm、yarn等
3.前端构建工具
包括webpack、rollup、grunt、esbuild、gulp、vite等，最重要的当属webpack，他做的最核心的事情就是分析依赖的关系，并进行代码的打包
4.脚手架包括vue-cli、umijs、create-react-app等等，脚手架人让我们创建一个项目的时候更加方便，他同时使用到了前面我们提到的几个方面的工具，例如vue-cli就用到了webpack。

2.工程化中的webpack

随着前端的发展，各种方便我们进行开发的新工具、新语法被广泛使用，例如vue、react框架，ES6语法，css预编译器Less、Sass等，这些东西对开发者而言用起来方便、舒服，但是我们的代码最终是要跑在浏览器上，而浏览器想要的是最原始的html、css、js，因此我们需要将写好的代码编译成浏览器喜欢的样子，这个过程也叫做打包，webpack就能帮我们完成这项工作，当然，webpack能做的远不止这些，后面我会详细地学习webpack，同时也对前端工程化进行更深刻的理解。

3.初探webpack

功能介绍

Webpack 本身功能是有限的:

开发模式：仅能编译 JS 中的 ES Module 语法
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

开始使用

1. 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 创建文件

count.js

export default function count(x, y) {
  return x - y;
}

sum.js

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

main.js

import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

3. 下载依赖

打开终端，来到项目根目录。运行以下指令：

初始化package.json

npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

下载依赖

npm i webpack webpack-cli -D

4. 启用 Webpack

开发模式

npx webpack ./src/main.js --mode=development

生产模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

5. 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

【webpack】1.webpack与前端工程化