前言

在前端工程化对世界中，掌握webpack配置基本是我们每个前端工程师需要掌握的，在vue/react/angular发展初期，他们但脚手架还不够完善，许多但配置都需要开发者自己来，但随着脚手架工具但完善，项目但整体架构已无需开发人员考虑太多，所以现在许多新入行的前端开发者会觉得前端开发毫无难度，这种也没错，如果你仅仅满足于完成业务功能开发，那我自无话可说。但作为一个有追求的前端，肯定不能仅仅满足于雾里看花，知其然，知其所以然。本文就来详细分析下webpack的工作流程，以及工作原理。

webpack工作流程

• webpack基本流程简单明了，初始化 => 编译 =>   输出。但在开发阶段我们需要 热更新，那这样就成了一个循环，初始化 => 编译 => 输出(每次修改文件) => 编译 => 输出 .....。而这三个流程中会有webpack会有很多工作要做，本小节分析下这三个过程中webpack的实际工作机制。
  
• Webpack功能流程实现的核心模块tapable，在webpack工作流程中,Compiler 和负责创建 bundles 的 Compilation 都是tapable构造函数的实例， 它的工作流程就是将各个插件串联起来，而实现这一切的核心就是 tapable。
  

注：本节主要来了解webpack工作流程中至关重要的两个功能，loader功能和plugin功能。

loader的实现

作用：Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。

目的：将源文件转换浏览器能够识别的文件。 //webpack中loader配置

module: {
    rules: [
      {
      //匹配文件到正则
        test: /\.scss$/,
        //用于处理到插件
        use: [
          'style-loader',
          {
            loader:'css-loader',
            // 给 css-loader 传入配置项
            options:{
              minimize:true, 
            }
          },
          'sass-loader'],
      },
    ]
    //use的数组顺序表示了loader的执行顺序，越在数组后则越先执行
  }

• 特点1：单一职责性，一个loader只能完成一种转换。
• 特点2：按链式顺序执行，上一个处理后的结果会传递给下一个。
• 一些loader内部常用的上下文（具体解释见）：this.context this.callback this.async this.cacheable this.loaders this.target this.sourceMap
• 自定义loader步骤：定义loader函数 =》获取配置文件参数 =》导出=》导入webpack配置文件。
• 引用：webpack中module使用时可以上传到npm包通过loader直接使用。可以通过resolveLoader找到loader文件路径来引用

//自定义loader demo

//将输入的文件处理后再返回
const loaderUtils = require('loader-utils');
module.exports = function(source){
    ....
    //webpack 的工具loader-utils
    let options = loaderUtils.getOptions(this)
    //关闭缓存功能
    this.cacheable(false);
    return source
}

分析结论： 当webpack确定好入口文件后，此时webpack调用所有的loader对模块进行编译。

plugin实现

Plugin 机制让webpack的执行其更加灵活，可以适应各种应用场景。 在 Webpack 运行过程是一个事件流，在不同的生命周期会触发相应的事件，而Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

作用：plugin可以监听webpack生命周期的相关事件，在合适的时机通过webpack提供的API改变输出结果，这也是webpack成为当今前端构建工具的原因之一（plugin使webpack不仅仅是打包压缩代码的工具）。

目的：在于解决loader解决不了到事情，例如：自动生成hash的html，在本地开启的web服务等等

自定义基本plugin：

• 命名函数
• apply
• 绑定webpack钩子函数
• 内部实例的特定数据
• 回调函数

//命名一个独一无二的函数名
function DemoPlugin(options) {
  // 使用 options 设置插件实例……
}
//定义apply函数
DemoPlugin.prototype.apply = function(compiler) {
//将apply绑定到webpack自身到事件钩子
  compiler.plugin('run', function(compilation//内部实例的特定数据,callback) {
    console.log('Hello World!');
    //执行完成后的回调函数
    callback()
  });
};
module.exports = DemoPlugin;

webpack中执行流程：

• webpack启动后，在读取配置的过程中会执行new MyPlugin初始化一个plugin获取其实 例
• 在webpack初始化compiler后，可以通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件
• 此时可以通过compiler对象去操作webpack 注：要想深入的了解plugin，那必须去掌握webpack Compiler 和 Compilation的 相关内容

resolve实现

作用：用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用。

目的：为了方便找到完整的文件路径信息。

常用到到功能：

• 自动扩展文件名

//能够使用户在引入模块时不带扩展
extensions:['.js','.jsx','.css','.less']

• 是利用resolve定义路径别名

//webpack.config.js的resolve模块定义
alias: {
  demo: path.resolve(__dirname, 'src/demo/'),
}
//为定义resolve前
import demo from '../../demo/utility';
//定义resolve后
import demo from 'demo/utility';

• 利用reslove定义modules解析路径和顺序

//定义modules在解析路径时先从src目录下开始寻找 然后在到node_modules
modules: [path.resolve(__dirname, "src"), "node_modules"]

总结

写完这篇文章感觉很多webpack核心原理都没有理解透彻，只是大概明白了webpack到核心功能，以及如何去使用这些功能。后续的文章我觉得应该会从一个个webpack的要点出发去深入理解他的每一个点。在此先给自己定个下篇文章的内容：自己动手实现一个webpack插件功能。文章中如果有所不当之处，请各位批评指针。相互进步是我们写文章和看文章的目的，相互交流则是促使我们更进一步的阶梯。