• 【Vue五分钟】 五分钟了解Webpack底层原理以及脚手架工具分析

    📑博客主页：@丘比特惩罚陆

    💖欢迎关注：点赞收藏⭐留言✒
    💬系列专栏：web前端、嵌入式、笔记专栏
    🎮 加入社区： 灌水乐园
    🥇人生格言：选对方向，每走一步都是进步！
    ✒️欢迎大佬指正，一起学习！一起加油！

    👏 希望大家能小手一动，帮忙点个赞！

    😁资源邮箱：2237814512@qq.com；微信：lss0901lili1130

    目录

     1.如何编写一个Loader(一)

    2.如何编写一个Loader（2）

    3.如何编写一个Plugin

     1.如何编写一个Loader(一)

    当我们打包一个类型文件 / 模块时 loader 就会起作用。 通过 npm init 初始化，并且安装好 webpack 相关包，简单配置一下。 
    1. const path = require( 'path;
    2. module.exports = {
    3. mode: 'development',
    4. entry: {
    5. main: './src/index.js'},
    6. output: {
    7. path: path.resolve(_dirname, 'dist ' ),filename: '[name] . js'
    8. }
    我们实现这么一个 loader ，如果引入一个 js 文件，看到一个 dell 字符串就改成 dell li 。
    其实 loader 就是返回一个函数（不能箭头函数，因为需要用 到 this ，避免指向问题），可以接受参数 source （即引入文件的内容）。 
    1. module.exports = function(source) {
    2. return source.replace( 'dell', 'dellLee ' );}
    如此即可完成一个 loader ，回到 config 配置就行，注意引入的时候需要以路径形式写，不能直接写一个名字。 
    1. module: {
    2. rules:[{
    3. test:/\js/ ,
    4. use: [
    5. path.resolve(__dirname, './loaders/ replaceLoader.
    6. ]
    7. }
    Use 可以通过 options 传递参数， loader 通过 this.query 可以 获取参数。 
    1. use: [
    2. {
    3. loader: path.resolve(_ dirname,'./loaders/ repl.options:{
    4. name: 'lee'}
    5. }
    1. module.exports = function(source){
    2. return source.replace( 'dell', this.query.name);上
    具体可以参考官网的 API 。 为了更好的获取参数可以采用官方的插件. 
    1. const loaderUtils = require( ' loader-utils' );module.exports = function(source) {
    2. const options = loaderUtils.getOptions (this);return source.replace( 'dell', options.name);}
    要是想往外抛出点什么可以通过 this.callback 方法。 
    this.callback(null,result)1

    2.如何编写一个Loader（2）

    如何在 loader 中执行异步代码呢，可以通过 this.async 方法声明一下，然后调用该方法返回结果。 
    1. const loaderUtils = require( 'loader-utils' );
    2. module.exports = function(source) {
    3. const options = loaderUtils.get0ptions(this);
    4. const callback = this.async();
    5. setTimeout(=>{
    6. const result = source.replace( 'dell', options.name);
    7. callback( result);
    8. },1000);
    9. }
    而该方法返回的其实就是 this.callback 方法。那怎么使用多个 loader ？这个就在 use 中使用多个就行了， 同异步可以一起使用。 为了避免一直都是写路径，可以给 loader 配个查找范围（默
    认在 node... ），然后就可以直接写名字了。 
    1. resolveLoadef: {
    2. modules: [ 'node_modules', './loaders ']
    3. }
    4. module: {
    5. rules: [{
    6. test:/\.js/ ,
    7. use: [
    8. {
    9. loader: 'replaceLoader' ,
    10. },
    11. {
    12. loader: 'replaceLoaderAsync',
    13. options: {
    14. name: 'lee'}
    15. },]
    16. ]}
    Loader 可以用于异常捕获、国际化等等，实际上就不需要侵入到业务代码了，通过 loader 检测处理即可，也就是说 loader 可以处理包装源代码.

    3.如何编写一个Plugin

    Loader 是处理模块， plugin 是在打包某个时刻生效（发布订阅机制）。 目前希望实现一个打包结束后在 dist 目录下生成一个版权文件。Plugin 本质上是一个类，类里面有个关键方法 apply 。 
    1. class CopyrightwebpackPlugin {
    2. constructor() {
    3. }
    4. apply(compiler){}
    5. }
    6. I
    7. module.exports =CopyrightwebpackPlugin;|
    使用的话可以在 webpack.config.js 中引入，然后实例化（因为插件本质上是一个类）即可。

    至于我们 new 实例化使用插件时传递的参数就是通过 constructor 接收了。 apply 函数的 compiler 就是一个 webpack 实例，通过它的hooks 钩子（具体可以看官网）可以去到对应的时刻值。 这边就采用了一个 emit 钩子（钩子异步与否是有一定影响的），由于该钩子是异步的我们就tapAsync 方法（则必须 调回调函数 cb ）。 注意 compiler 存放配置的所有内容（包括打包的）而参数compilation 是存放这一次打包的所有内容。 
    tapAsync( 'CopyrightwebpackPlugin', ( compilation，cb)
    通过访问 compilation 里面的 assets 就可以找到打包生成的内容。这里 21 就是文件大小（指字符串长度）， source 就是文件具体内容。 
    1. compilation.assets[ copyright.txtj]={
    2.   source:function({
    3.   return "copyright by dell lee'},
    4. size: function(){
    5. return 21;l
    6. }
    7. ;cb();})
    8. }
    如果是同步代码就直接 tap 方法，且无需回调函数，其余参数一样。如果想查看 webpack 具体参数可以以 script 命令调试，还可以加参数，第一个是启动 node 的调试工具（方便调试插件），
    第二个是在第一行打印一个断点，然后就可以在文件任意地方加断点，在浏览器 F12 看。
  • 相关阅读:
    通过代码生成代码的 文件
    R语言根据日历周期处理时间序列数据（周、月、年等）：使用xts包的apply.yearly函数和mean函数计算时间序列的年平均值（yearly）
    06-散列(Hash)基础分析
    Windows端通过Vscode或PowerShell连接linux服务器，打开图形界面的程序
    学生网页课程设计期末作业 HTML+CSS+JavaScript甜品蛋糕网页设计(5页)
    Spring Boot + Canal 实现数据库实时监控
    wps快速生成目录及页码设置（自备）
    Intel 64 和 IA-32 架构指令前缀
    TypeScript算法题实战——字符串篇（字符串的反转、旋转、查询、KMP算法）
    【JVM调优实战100例】02——虚拟机栈与本地方法栈调优五例
  • 原文地址：https://blog.csdn.net/Lushengshi/article/details/126939781