♣ webpack起步

Webpack是什么？

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

对上面的解释进行拆解：

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

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

点击DOCUMENTATION来到文档页：

API：API，提供相关的接口，可以自定义编译的过程（比如自定义loader和Plugin可以参考该位置的API）

BLOG：博客，等同于上一个tab的BLOG，里面有一些博客文章；

CONCEPTS：概念，主要是介绍一些webpack的核心概念，比如入口、出口、Loaders、Plugins等等，但是这里并没有一些对它们解析的详细API；

CONFIGURATION：配置，webpack详细的配置选项，都可以在这里查询到，更多的时候是作为查询手册；

GUIDES：指南，更像是webpack提供给我们的教程，我们可以按照这个教程一步步去学习webpack的使用过程；

LOADERS：loaders，webpack的核心之一，常见的loader都可以在这里查询到用法，比如css-loader、babel-loader、lessloader等等；

PLUGINS：plugins，webpack的核心之一，常见的plugin都可以在这里查询到用法，比如BannerPlugin、CleanWebpackPlugin、MiniCssExtractPlugin等等；

MIGRATE：迁移，可以通过这里的教程将webpack4迁移到webpack5等；

Webpack的依赖安装

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

• 所以我们需要先安装Node.js，并且同时会安装npm；
• 也可以使用nvm或者n来管理Node版本；
• Node官方网站：https://nodejs.org/

webpack的安装目前分为两个：webpack、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 # 局部安装

传统开发存在的问题

我们的代码存在什么问题呢？某些语法浏览器是不认识的（尤其在低版本浏览器上）

• 1.使用了ES6的语法，比如const、箭头函数等语法；
• 2.使用了ES6中的模块化语法；
• 3.使用CommonJS的模块化语法；
• 4.在通过script标签引入时，必须添加上 type="module" 属性；

显然，上面存在的问题，让我们在发布静态资源时，是不能直接发布的，因为运行在用户浏览器必然会存在各种各样的兼容性问题。我们需要通过某个工具对其进行打包，让其转换成浏览器可以直接识别的语法；

webpack默认打包

我们可以通过webpack进行打包，之后运行打包之后的代码在目录下直接执行 webpack 命令生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件：

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

我们发现是可以正常进行打包的，但是有一个问题，webpack是如何确定我们的入口的呢？事实上，当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口；所以，如果当前项目中没有存在src/index.js文件，那么会报错；

查看代码

//format.js
const dateFormat = (date) => {
  return "2020-12-12";
}

const priceFormat = (price) => {
  return "100.00";
}
//module.exports和exports属于commonJs规范
module.exports = {
  dateFormat,
  priceFormat
}

查看代码

//math.js
//export和export default是ES6模块规范。
export const sum = (num1, num2) => {
  return num1 + num2;
}

export const mul = (num1, num2) => {
  return num1 * num2;
}

查看代码

//index.js
//ES6
import { sum, mul } from './js/math.js';
//commonJs
const { dateFormat, priceFormat } = require('./js/format');

console.log(sum(20, 30));
console.log(mul(20, 30));

console.log(dateFormat("1213"));
console.log(priceFormat("1213"));

Webpack配置文件

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

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

但是如果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？比如我们将webpack.config.js修改成了 wk.config.js；这个时候我们可以通过 --config 来指定对应的配置文件；但是每次这样执行命令来对源码进行编译，会非常繁琐，所以我们可以在package.json中增加一个新的脚本：

webpack --config wk.config.js

Webpack依赖图

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

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