咱也标题党一回 哈哈哈

    要使用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查找模块的速度