webpack 第二弹 （原理）

Posted 2020-11-23 xiran

webpack原理

基础+使用

1.webpack是啥

webpack是一个js文件打包器，在处理应用程序时，会将程序用到的静态文件构建成一个依赖关系图 并把他们打包成一个或多个 bundle.js

2 webpack 包含： 入口 （entry），出口 （output） ,loader， 插件（plugins）

(1) entry ：定义依赖图的 开始
配置：（webpack.config.js）

moudle.export={
    entry:""//路径+文件名

}

（2） 出口:outputb 规定 webpack创建 bundle.js的路径

配置：

moudle.export={

entry:"",
output:{
        path:"" //最终bundle.js 生成的文件路径,
        filename:""  //编译完成后生成的文件名 默认为 bundle.js
    }
}

(3) loader 让js文件可以加载其他文件类型（支持所有文件类型）

配置时有两个参数

text 指明是哪个类型的文件

use 指明使用哪个loader

webpack 常用的loader:

样式：style-loader、css-loader、less-loader、sass-loader等

文件：raw-loader、file-loader 、url-loader等

编译：babel-loader、coffee-loader 、ts-loader等

校验测试：mocha-loader、jshint-loader 、eslint-loader等

配置（webpack.config.js）：

moudle.export={

    entry:"",
    output:{
        path:"",
        filename:""
    },
    loader:{
        text:""// 文件类型的正则，
        use:""// 指定 使用的loader   
    }   

}

(4) Plugins: 用来处理各种功能

配置： 在webpack.config.js中

1.require所要用的模块

2.在plugin数组中实例化
const htmlWebpackPlugin=require("")  //引入模块
moudle.export={
        entry:"",
    output:{
        path:"",
        filename:""
    },
    loader:{
        text:""// 文件类型的正则，
        use:""// 指定 使用的loader   
    }   
    plugins:[
        new HtmlWebpackPlugin(...参数)
    ]   
}

webpack原理2

1.webpack功能：

（1） 代码转换 typescript编译成js sass,less,scss 编译成css

(2) 文件优化 引入的图片，js等各种文件压缩

（3）代码分割 提取公共代码 提高首屏加载速度

（4） 模块合并 合并构建功能相似的模块代码

（5） 自动刷新 配置 webpack 热更新后可以保存代码 页面自动刷新

（6） 代码检验 检验代码是否符合 标准

（7） 自动发布 更新完代码后，可以自动构建出上线版本并传输给发布系统

2.webpack构建流程

（1） 初始化参数 从shell和配置文件中 合并参数 得到最终的参数

（2） 开始编译 通过得到的参数初始化complier对象，加载所有插件，通过run 方式编译
complier 是webpack的实体（tapable 的实例）complier能创建 compliation对象
compoliation执行完后 将最终结果返回给complier

（3） 确定入口文件 根据webpack.config.js/package.json 找到入口文件

（4） 编译模块 从入口文件开始，递归调用所有loader把模块翻译成compliation 递归所有依赖模块，然后重复编译
最终得到 每个模块的最终内容以及他们之间的依赖关系

引入各种模块

（5）输出资源 根据入口文件和各种moudle的关系。生成一个个包含模块的chunk, 然后将chunk转换成一个单独的文件加入输出列表

chunk : webpack 通过引用关系逐个打包模块，这些模块就生成了一个 chunk
chunk 生成的三种情况
1.entry 入口文件
2.异步加载模块
3.代码分割
（6） 确定好输出内容后，根据配置的出口文件和内容，将文件输出到指定的文件上

3.script 标签：

dev 开发版本的配置主要侧重在hot-reload上面，提升开发效率。

production 线上版本，主要侧重在 js, css 压缩
    
test 目前没有配置 但是主要是单元测试和集成测试。