前端工程化之webpack核心功能

简介: 在前端工程化对世界中,掌握webpack配置基本是我们每个前端工程师需要掌握的,在vue/react/angular发展初期,他们但脚手架还不够完善,许多但配置都需要开发者自己来,但随着脚手架工具但完善,项目但整体架构已无需开发人员考虑太多,所以现在许多新入行的前端开发者会觉得前端开发毫无难度,这种也没错,如果你仅仅满足于完成业务功能开发,那我自无话可说。

前言


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


相关文章
|
6天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
102 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
在现代前端开发中,工程化是提高开发效率和项目质量的关键。UniApp 结合 Webpack 和 Vite,提供强大的工程化支持。Webpack 功能强大,支持复杂项目的构建;Vite 则利用现代浏览器的 ESM 特性,提供快速的开发体验。开发者可根据项目需求选择合适的工具,显著提升开发效率和项目质量。
|
4月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
125 6
|
4月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
166 4
|
4月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
120 7
|
4月前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
100 2
|
5月前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
工程化(webpack+vite)
|
5月前
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
65 3
|
5月前
|
前端开发 JavaScript
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
76 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
|
5月前
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
264 0

热门文章

最新文章

  • 1
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
  • 3
    前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
  • 4
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 6
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 7
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 8
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
  • 9
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布