花上几分钟了解 webpack 前言： webpack 仅仅只能分析各种模块的依赖关系，形成资源列表。输出到指定文件模

前言：

webpack 仅仅只能分析各种模块的依赖关系，形成资源列表。输出到指定文件

先谈谈基本内容。 webpack 重要的地方还是在优化上面。下一篇谈谈优化

左：模块依赖
中：webpack
右：运行内容（静态资源）

使用webpack工具的目的：将一群浏览器不识别的东西，转成浏览器能识别的东西。

我对webpack的理解

仅仅只能分析各种模块的依赖关系，形成资源列表。输出到指定文件

webpack 是一个工具。工具的出现都是为了简化我们操作的。  

webpack 

目的 就是将一群  浏览器不识别的东西，转成浏览器能识别的东西。 

1、 提一下 es6+。 es 在发展 提供有快捷的  简便的语法命令。
每个浏览器兼容性不一样呀，都是不一样的内核。
webpack  提供了 babel 用来转成 浏览器都识别的 es5。

2、 开发者 引入的三方包 （cmd  esM） 不确定。 浏览器只识别  esM。 那就转成 esM。
    例如：  ajax 能在node中执行，用的就是 commjs 规范。 还有很多很多比较老的三方包。
    
    webpack 打包的非常非常重要的特点
3、 浏览器只能认识打包之后的内容。 每次改点内容都得  build一下。 那也太耗时了。
    webpack 引入了 热更新。
    
4、  然后打包的内容大， 等等等    就引入了   plugin  插件系统。  
    webpack 强大的生态。 plugin 各种都有。  然后 就出现了webpack的各种优化。
    多线程打包  gizp压缩 等等等。

webpack 是什么

一个打包（构建）的工具。  

基于模块化的打包（构建）工具。

webpack 把开发中用到的所有的东西，都视为模块。例如：  js、 png、jpg、sass、css

webpack 基于nodejs 因为要读取文件

通过一个入口文件（启动文件）。把入口文件当做一个模块，然后开始分析他的依赖关系。然后压缩等。

例如： import require amd cmd esm 他们的导入语句。他们就是有依赖关系的。

webpack 是基于nodejs 环境的。构建过程是需要在 node环境

因为分析依赖  需要读取文件。  fs 那些的运行环境都是 node。

webpack特点：

1、 为前端工程化而生
1、 生态强大
2、 基于nodejs  （运行在 nodejs 环境）
3、 基于模块化， 支持 cmd  amd  esm

webpack的安装通过npm安装提供了两个核心包

webpack（构建）：核心包。包含了 webpack 的构建过程汇总用到的所有api

webpack-cli: 提供一个简单的cli 命令。他会去调用 webpack api , 来完成构建。

默认情况下： webpack 会以 ./src/index.js 作为入口文件分析依赖关系，打包到 ./dist/main.js文件中。

通过 --mode 设置环境。

development 开发环境，打包的内容体积大能阅读

product 生产环境，打包的内容体积小阅读困难

npm i -D 开发环境

开发依赖和生产环境依赖如何区分

运行的时候（浏览器运行 html js）  需要不需要   需要就是生产依赖，不需要就是 开发依赖。

例如  webpack   开发需要webpack 构建。 构建完 就不需要webpack了。 因此是 开发依赖。
例如  某些三方包 jq   构建好的内容  依然需要 ，就是生产依赖

浏览器识别esM, 不识别 commonjs ，因此咱们让不管什么模块化规则，都转成 esm。

node 环境默认支持 commonjs。支持esm 需要配置

方式1 （方式常用经常出现 esm cmd 方式混用）三方库

package.json 中 配置   type: 'module'

方式2

文件后缀  .mjs
用就好了

混用常遇到情况

juejin.cn/post/741712… 这里说了些导入导出总结

1、再 esM 中需要用三方包是 commonjs的

不用直接esm 中用 require(), esm 规范不认识 require()。

用动态加载的时候包一层。使用动态导入模拟 require()

commonjs

// comm.js
module.exports = {
    a: '1',
    b: '2'
}

转文件

const loadCommonJs = async () => {
    const commonModule = await import('**/comm.js')
    return commonModule
}

const commonModule = loadCommonJs()

webpack 编译过程

1、拿配置文件
2、从入口开始， 分析依赖
3、打包输出

1、拿配置文件

webpack 会将 cli参数、 package.json 配置文件、默认配置进行融合。

处理过程是 依赖 yargs  第三方库完成的


融合都是 三方库的特点。

yargs 是一个命令行参数解析的 node 库

www.npmjs.com/package/yar…

2、分析依赖就用 cmd esm import requre 来分析

3、输出

当然聊 webpack，怎么能不聊 plugin 和 loader呢

loader 一个函数

定位：转换代码

转换成  浏览器能认识的东西，都是loader 来完成的。
作用：   将某个源码字符串转换成另一个源码字符串返回。

使用方式：

module.exports = {
    module: { //针对模块的配置，目前版本只有两个配置，rules、noParse
        rules: [ //模块匹配规则，可以存在多个规则
            { //每个规则是一个对象
                test: /.js$/, //匹配的模块正则
                use: ["模块路径1", "模块路径2"]//loader模块的路径，该字符串会被放置到require中
            }
        ]
    }
}

在rules 中配置想要转换的规则

test 匹配文件

use 使用什么内容去转换

例如：高阶es 转 es5。 less sass 转 css 等等

plugin

plugin的本质是一个带有apply方法的对象

var plugin = {
    apply: function(compiler){
        
    }
}

或者

class MyPlugin{
    apply(compiler){

    }
}

plugin 工作过程：

初始化阶段。通过 plugin中 apply 函数，创建 Compiler 对象。 compiler 对象只有一个。其他工作是在 compiler 中创建 compilation 执行的。 apply 方法会在创建好 compiler 对象后调用。将 compiler 传入

compiler 的钩子函数 www.webpackjs.com/api/compile…

花上几分钟了解 webpack