webpack学习笔记(一)：初次见面，请多关照

前言

最近想搞一个个人博客网站。于是，在GitHub上面找别人做过的项目模板，拿来做个参考。然后，发现他们的项目组织方式似乎不是直接用react脚手架来创建的。几经周折后，发现了其中的奥秘。大家都采用webpack来对自己的工程进行打包。于是，踩坑姐就开始学习webpack的旅途。
在学习一个新的东西之前，首先要搞明白这个东西是什么，拿来干啥的；然后要搞清楚的问题是它怎么用的；最后要明白内部的实现机制是什么。鉴于踩坑姐刚接触webpack，这篇文章中就只介绍两个问题：

什么是webpack ------------------------是什么
如何创建webpack工程-------------------用起来

webpack是什么？

在webpack官网的官方文档上，关于webpack的描述是这样的

本质上，webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对映射到项目所需的每个模块，并生成一个或多个 bundle。我感觉官网上面的说明其实已经说的非常清楚了。但是在这里，我还是想谈一谈自己的理解。从字面上理解，“webpack”可以分成两个部分，一个是“web”，一个是“pack”。显然，web是网站，站点的意思；pack是打包的意思。放一块就是将网站打包或者是打包网站的意思。从字面上也能够看出来，webpack就是一个打包的工具。打包什么东西呢，显然嘛，应用网站的工程。
既然是打包，那必然会有一个打包前和打包后的一个东西了。打包前的内容，我们一般称为源代码或者是资源；而打包后的东西，这里把它叫做“bundle”。我查了一下，bundle这个单词的意思是捆，束。感觉用这个单词来表示打包之后的东西还挺形象的，就是把一串html文件和js代码放到一起，捆成一束的意思了。
看到这里是不是有一种隐隐约约的感觉，这个过程就是C语言编译的过程嘛。一堆*.h和*.c文件，通过编译器，变成*.o文件，然后再通过依赖关系连接起来，最后变成一个可执行的应用程序。可是，真的是这个样子的吗？
既然都这样问了，那显然不是了。从最终的结果来看，也能够发现。通过webpack打包之后的输出文件，扩展名还是.js和.html，然而编译就不一样了，编译后的扩展名已经变成了其他，不再是原来的.c和.h.
在大概知道webpack是什么东西之后，接下来还应该了解一下webpack中的几个核心的概念：

入口(entry)：这里有一个入口起点(entry point)的概念。该属性指示webpack应该使用哪个模块，来作为构建起内部依赖图的开始
输出(output)：该属性告诉webpack在哪里输出他所创建的bundle
loader：webpack只能够处理JavaScript和JSON文件。而loader使得webpack能够处理其他类型的文件，并且将其转化为有效的模块
插件(plugin)：可以执行范围更广的任务，比如打包优化，资源管理，注入环境变量
模式(mode)：有三个参数development|production|none,用来配置不同环境下的优化
浏览器兼容性(browser compatibility)：由于webpack打包后的工程是运行在浏览器端的，需要考虑浏览器的兼容问题
环境(environment)：webpack的运行环境

创建webpack工程

开始创建工程

创建工程文件夹
创建一个webpack工程的过程和利用脚手架创建react工程的过程有一点区别。利用脚手架创建的第一步是全局安装create-react-app，然后利用create-react-app来进行工程的创建。然而，创建webpack工程则是先创建工程目录，然后利用npm命令进行初始化。在Windows命令提示框中或者VScode终端中输入的命令如下：

mkdir webpack-demo
cd webpack-demo
npm init -y 通过最后一行命令生成一个package.json文件，该文件中包含了新创建工程项目的基本信息。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在该文件中，有几个地方是需要关注一下的，"scripts"中包含的是一些输入到命令提示框中的命令；"main"定义了webpack打包的入口起点。

在本地安装 webpack 和 webpack-cli
使用npm命令在本地安装webpack和webpack-cli

npm install --save-dev webpack webpack-cli 安装完之后，会在项目根目录下出现一个node_modules文件夹和一个package-lock.json文件，并且在package.json文件中会多出来如下代码：

  "devDependencies": {
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }

该代码中的"devDependencies"表示在开发时使用到的依赖库。与之相对应的还有一个"dependencies"，表示项目中使用到的依赖库。

第一个bundle

webpack-demo
| - package.json
| - /dist
    | - index.html
| - /src
    | - index.js

添加 lodash 依赖

npm install --save lodash

主要代码

index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>起步</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
 </html>

index.js

import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

  // lodash 在当前 script 中使用 import 引入
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

更改package.json文件去掉"main":"index.js";添加"private":true
运行打包命令

npx webpack 运行这行命令，可以将入口文件打包，并生成指定的bundle文件。如果运行正常，则使用浏览器打开index.html文件，可以看到“hello webpack”的字样，结果如下图所示。

使用配置文件

在根目录下，添加webpack.config.js文件
在webpack.config.js中添加配置

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

运行打包命令

npx webpack --config webpack.config.js

使用 npm script命令

更新package.json文件：在scripts下面添加：

"build": "webpack"

运行 npm 命令：

npm run build 至此，我们就完成了使用webpack创建工程的全过程。