前言

在前端工程化对世界中,掌握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插件功能。文章中如果有所不当之处,请各位批评指针。相互进步是我们写文章和看文章的目的,相互交流则是促使我们更进一步的阶梯。

参考文档: