Webpack入门到精通（1）

前言

什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack 有哪些功能(代码转换 文件优化 代码分割 模块合并 自动刷新 代码校验 自动发布)
首先学习webpack 需要有简单的node 基础 ，打开node 官方网站进行安装node, http://nodejs.cn/ 下载最新版node包并进行安装。

学习目标：

1. webpack 常见配置 webpack高级配置
2. webpack优化策略
3. AST抽象语法树
4. webpack中的Tapable
5. 掌握webpack流程 手写 webpack
6. 手写webpack中常见的loader
7. 手写webpack 中常见的plugin

• 定义好学习目标让我们开启webpack 的新旅程。（本文学习主要针对webpack4.0 进行学习讲解）

---

webpck—>基础搭建与使用：

安装完毕在终端 快速创建node项目 执行命令npm init -y 生成packge.json
在当前目录安装本地webpack
终端执行命令：
npm i webpack webpack-cli -d
i表示install ,d表示当前是开发环境安装完成会产生node_modules文件
webpack 可以进行0配置 并且webpack是打包工具(默认是js模块 通过入口进行打包输出打包后js结果)。
创建src目录 --> 创建index.js -> 输出:console.log(‘hello webpack’);
npx 语法进行把index.js 进行打包
终端执行命令：
npx webpack
我们发现当前目录生成了一个dist 目录并且创建了一个main.js(如图:)

执行顺序:(默认找node_modules—>bin文件 --> webpack文件 )

这里我们明白了安装webpack 必须安装他的依赖 webpack-cli
webpack打包默认支持js模块化 ->类似于common.js

webpack:两种默两种模式如果没有创建webpack.config.js 配置文件指定mode (production/development)生成模式或开发模式，打包运行会直接默认生产模式打包并且进行压缩。
这里说一下webpack配置文件的默认名称有两种 （webpack.config.js / webpackfile.js 一般情况下我们会选择前一种）

如何手动配置webpack呢？其实比较简单

(1)创建webpack.config.js 配置文件 由于webpack是node.js的框架所以配置文件中要采用node语法来进行编辑。

const path = require("path"); //webpack内部方法path组件
module.exports = {
  mode: "development", //打包模式 development开发模式
  entry: "./src/index.js", //入口文件指定
  output: {
    //出口文件配置 配置出口打包路径
    filename: "build.js", //打包后的文件名称
    path: path.resolve(__dirname, "build") //resolve绝对路径引入
  }
};

我们分析一下build.js 打包出的结果,默认下是一个匿名函数 并且接收两个参数 接收一个对象,Key : value (key:是当前模块的路径 value：是一个执行函数)

接收到modules 里 先定义一个缓存对象 installedModules先定一个缓存目的是如果我当前模块加载完成没有必要再进行加载
webpack_require 实现了一个require方法因为浏览器无法直接执行node的require方法 (详解如图)

执行__webpack_require__ 发现接收了一个入口模块

终端运行： npx webpack , 发现我们打包当前目录产生了文件夹build目录
分析了一下打包文件是不是感觉webpack 源码没有想象的那么难 继续我们webpack 的探索之旅。
如何更改webpack 配置文件名称呢其实很简单重命名webpack.config.js (webpack.test.js)
执行命令:
npx webpack --config webpack.test.js 发现可以执行webpack打包。
这样打包我发现命令很长所以我们利用packge.json 来配置打包脚本在scripts–>添加build.

"scripts": {
   
   
 "test": "echo \"Error: no test specified\" && exit 1",