关于webpack，你想知道的都在这；

咱也标题党一回哈哈哈

要使用webpack优化项目打包构建速度，首先得知道问题出在哪，

要知道问题出在哪，首先得知道webpack 打包的基本原理才能针对性的去做优化，下面首先了解webpack基本原理

一，webpack构建执行流程

① 初始化参数

　　我们执行npx webpack 命令的时候，webpack首先会检测参数是否合法，然后去初始化我们的配置参数

②开始编译的准备工作

这也是编译阶段开始的部分，这个部分会有个概念； compiler

首先会实例化一个Compiler对象，然后添加上一步校验的参数

③编译模块

使用compiler.run 进行编译

这里实例化compilation

　　然后找到入口文件，通过acron 转换为ast语法树，

　　webpack递归找到所有依赖的模块，webpack中会通过入口递归把所有依赖的模块使用loader进行处理

　　这里可以插一句loader的作用就是处理文件

④完成模块编译

　　将上一步得到的module封装成module代码

⑤输出资源

保存到assets中

⑥输出完成

　　调用onCompilered 生成文件保存到目录

二，关于loader和plugin

　　webpack依靠的就是各种loader和plugin来完成代码的转化，文件的转化，打包等任务，webpack本身功能并不强大，只是loader和plugin赋给他强大的”外挂“功能

　　①loader的总体运行流程

　　②plugin的原理

　　　　每个插件都是一个函数，并且函数的prototype 上会绑定一个apply方法

　　举个栗子一下代码会再编译过程中打印hello，参数名字

class DonePlugin {
  constructor(options) {
    this.options = options;
  }
  apply(compiler) {
    compiler.hooks.done.tap("DonePlugin", (stats) => {
      console.log("Hello ", this.options.name);
    });
  }
}
module.exports = DonePlugin;

　　　webpack最最最重要的部分莫过于优化配置了

　　1 缩小范围

　　　　extensions 在导入语句import require 没有添加扩展名后缀的时候，指定extension之后会再指定的文件扩展名中寻找文件

　resolve:{
       extensions: ['.js','.jsx','.json','.css']
}

　　　alias 配置别名会加快webpack查找模块的速度

关于webpack，你想知道的都在这；

猜你喜欢