weixin_33737134
weixin_33737134

webapck由浅入深——（Tapable）

webpack系列文章

  1. webpack由浅入深——（webpack基础配置）
  2. webpack由浅入深——（webpack优化配置）
  3. webpack由浅入深——（tapable）
  4. webpack由浅入深——（webapck简易版）
  5. webpack由浅入深——（ast、loader和plugin）

Tapable和webpack

Tapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。在这些钩子里面调用内置或者用户在webpack.config.js中使用的插件，webpack在编译打包代码的各个环节会使用到。

Tapable中Hook分类

  • Taptable:
    • Sync*:
      • SyncHook
      • SyncBailHook
      • SyncWaterfallHook
      • SyncLoopHook
    • Async*:
      • AsyncParallelHook
      • AsyncParallelBailHook
      • AsyncSeriesHook
      • AsyncSeriesBailHook
      • AsyncSeriesWaterfallHook

Sync*型Hook

Sync*型的Hook里面的Hook都是同步执行的

SyncHook

串行同步执行,不关心返回值

class SyncHook {
    constructor(){
        this.tasks = [];
    }
    tap(name,task){
        this.tasks.push(task);
    }
    call(){
        this.tasks.forEach(task=>task(...arguments));
    }
}
let queue = new SyncHook(['name']);
queue.tap('1',function(name){
  console.log(name,1);
});
queue.tap('2',function(name){
  console.log(name,2);
});
queue.tap('3',function(name){
  console.log(name,3);
});
queue.call('kbz');
复制代码
SyncBailHook

串行同步执行，bail是保险丝的意思，有一个返回值不为null则跳过剩下的逻辑

class SyncBailHook {
    constructor(){
        this.tasks = [];
    }
    tap(name,task){
        this.tasks.push(task);
    }
    call(){
        let i=0,ret;
        do {
            ret=this.tasks[i++](...arguments);
        } while (!ret);
    }
}
let queue = new SyncBailHook(['name']);
queue.tap('1',function(name){
  console.log(name,1);
  return 'Wrong';
});
queue.tap('2',function(name){
  console.log(name,2);
});
queue.tap('3',function(name){
  console.log(name,3);
});
queue.call('kbz');
复制代码
SyncWaterfallHook

串行同步执行，Waterfall是瀑布的意思，前一个订阅者的返回值会传给后一个订阅者

class SyncWaterfallHook {
    constructor(){
        this.tasks = [];
    }
    tap(name,task){
        this.tasks.push(task);
    }
    call(){
        let [first,...tasks]=this.tasks;
        tasks.reduce((ret,task)=>task(ret),first(...arguments));
    }
}
let queue = new SyncWaterfallHook(['name']);
queue.tap('1',function(name,age){
  console.log(name,age,1);
  return 1;
});
queue.tap('2',function(data){
    console.log(data,2);
    return 2;
});
queue.tap('3',function(data){
  console.log(data,3);
});
queue.call('kbz',25);
复制代码
SyncLoopHook

串行同步执行，Loop是循环往复的意思，订阅者返回true表示继续列表循环，返回undefine表示结束循环

class SyncLoopHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    call(...args) {    
        this.tasks.forEach(task => {
            let ret=true;
            do {
                ret = task(...args);
            }while(ret == true || !(ret === undefined))
        });
    }
}
let queue = new SyncLoopHook(['name']);
let count = 0;
queue.tap('1',function(name){
    console.log(count++);
    if(count==3){
        return;
    }else{
        return true;
    }
});
queue.call('kbz');
复制代码

Async*型Hook

  • ASync*型的Hook里面的Hook分为异步串行和异步并行两种
  • ASync*型的Hook里面的Hook按照实现方式分为normal型、promise型
  • ASync*型的Hook支持tapAsync、tapPromise注册，通过调用callAsync、promise方式调用。

对于promise还不清楚的可以参考promise原理就是这么简单

AsyncParallelHook

并行异步执行，和同步执行的最大区别在于，订阅者中可以存在异步逻辑。

  • normal型
class AsyncParallelHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    call() {
        let args=Array.from(arguments);
        let callback=args.pop();    //将全部任务执行完毕后执行的回调
        let i=0,size = this.tasks.length;
        function done() {   //用来统计订阅者异步任务执行完成的个数
            if (++i == size) {
                callback(null);
            }
        }
        this.tasks.forEach(task => {
            task(...args,done);
        });
    }
}
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
    setTimeout(function(){
        console.log(1);
        callback();
    },1000)
});
queue.tapAsync('2',function(name,callback){
    setTimeout(function(){
        console.log(2);
        callback();
    },2000)
});
queue.tapAsync('3',function(name,callback){
    setTimeout(function(){
        console.log(3);
        callback();
    },3000)
});
queue.callAsync('kbz',err=>{
    console.log(err);
    console.timeEnd('cost');
});
复制代码
  • promise型
class AsyncParallelHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
        let promises = this.tasks.map(task => task());
        //Promise.all所有的Promsie执行完成会调用回调
        return Promise.all(promises);   
    }
}
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(1);
            resolve();
        },1000)
    });

});
queue.tapPromise('2',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(2);
            resolve();
        },2000)
    });
});
queue.tapPromise('3',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});
queue.promise('kbz').then(()=>{
    console.timeEnd('cost');
})
复制代码
AsyncParallelBailHook

并行异步执行，bail是保险丝的意思，只要有一个异步逻辑返回不为null则会直接执行总的回调

  • normal型
class AsyncParallelBailHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let finalCallback=args.pop();
        let count=0,total=this.tasks.length;
        function done(err) {
            if (err) {  //如果有返回值，则直接执行总的回调
                return finalCallback(err);
            } else {
                if (++count == total) {
                    return finalCallback();
                }
            }
        }
        for (let i=0;ilet task=this.tasks[i];
            task(...args,done);
        }
    }
}
let queue=new AsyncParallelBailHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
    console.log(1);
    callback('Wrong');
});
queue.tapAsync('2',function(name,callback){
    console.log(2);
    callback();
});
queue.tapAsync('3',function(name,callback){
    console.log(3);
    callback();
});
queue.callAsync('kbz',err=>{
    console.log(err);
    console.timeEnd('cost');
});
复制代码
  • promise型
class AsyncParallelBailHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
        let args=Array.from(arguments);
        let promises = this.tasks.map(task => task(...arguments));
        return Promise.all(promises);
    }
}
let queue = new AsyncParallelBailHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(1);
            resolve();
        },1000)
    });
});
queue.tapPromise('2',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(2);
            //错误直接调用reject，那么会自动调用promise会捕捉到
            reject();   
        },2000)
    });
});
queue.tapPromise('3',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});
queue.promise('kbz').then(()=>{
    console.timeEnd('cost');
},err => {
    console.error(err);
    console.timeEnd('cost');
})
复制代码
AsyncSeriesHook

串行异步执行，和并行异步执行的主要区别在于，会将下一个订阅的函数当成参数传给前一个订阅的函数，前一个订阅的函数控制运行。

  • normal型
class AsyncSeriesBailHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        let i=0,size = this.tasks.length;
        let next=(err) => {
            let task=this.tasks[i++];
            //将下一个订阅者传递给前一个订阅者调用
            task?task(...args,next):callback(); 
        }
        next();
    }
}
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
   setTimeout(function(){
       console.log(1);
   },1000)
});
queue.tapAsync('2',function(name,callback){
    setTimeout(function(){
        console.log(2);
        callback();
    },2000)
});
queue.tapAsync('3',function(name,callback){
    setTimeout(function(){
        console.log(3);
        callback();
    },3000)
});
queue.callAsync('kbz',err=>{
    console.log(err);
    console.timeEnd('cost');
});
复制代码
  • promise型
class AsyncSeriesHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
        let promises=this.tasks.map(item => item());
        //将后一个promise放到前一个promise的then中执行，前一个执行完会自动执行then里面的异步逻辑
        return promises.reduce((a,b) => a.then(()=>b));
    }
}
let queue=new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
   return new Promise(function(resolve){
       setTimeout(function(){
           console.log(1);
           resolve();
       },1000)
   });
});
queue.tapPromise('2',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(2);
            resolve();
        },2000)
    });
});
queue.tapPromise('3',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});
queue.promise('kbz').then(data=>{
    console.log(data);
    console.timeEnd('cost');
});
复制代码
AsyncSeriesBailHook

串行异步执行，bail是保险丝的意思，只要有一个异步逻辑返回不为null则会跳出来直接执行最后的回调

class AsyncSeriesBailHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        let i=0,size = this.tasks.length;
        let next=(err) => {
            //如果返回的不是null则跳出后面逻辑，执行最后的回调
            if (err) return  callback(err); 
            let task=this.tasks[i++];
            task?task(...args,next):callback();
        }
        next();
    }
}
let queue = new AsyncSeriesBailHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
   setTimeout(function(){
       console.log(1);
       callback('wrong');
   },1000)
});
queue.tapAsync('2',function(name,callback){
    setTimeout(function(){
        console.log(2);
        callback();
    },2000)
});
queue.tapAsync('3',function(name,callback){
    setTimeout(function(){
        console.log(3);
        callback();
    },3000)
});
queue.callAsync('kbz',err=>{
    console.log(err);
    console.timeEnd('cost');
});
复制代码
  • promise型
class AsyncSeriesHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
        let promises=this.tasks.map(item => item());
        //将后一个promise放到前一个promise的then中执行，前一个执行完会自动执行then里面的异步逻辑
        return promises.reduce((a,b) => a.then(()=>b));
    }
}
let queue=new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
   return new Promise(function(resolve){
       setTimeout(function(){
           console.log(1);
           resolve();
       },1000)
   });
});
queue.tapPromise('2',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(2);
            reject();   //使用reject那么就会直接跳出后面的逻辑
        },2000)
    });
});
queue.tapPromise('3',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});
queue.promise('kbz').then(data=>{
    console.log(data);
    console.timeEnd('cost');
});
复制代码
AsyncSeriesWaterfallHook

串行异步执行，Waterfall是瀑布的意思，前一个订阅者的返回值会传给后一个订阅者

  • normal型
class AsyncSeriesWaterfallHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        let i=0,size = this.tasks.length;
        let next=(err,data) => {
            if (err) return  callback(err);
            let task=this.tasks[i++];
            if (task) {
                //除了第一个需要传arguments，后面的接受前一个的返回值
                if (i==0) { 
                    task(...args,next);
                } else {
                    task(data,next);
                }

            } else {
                callback(err,data);
            }
        }
        next();
    }
}
let queue = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
   setTimeout(function(){
       console.log(1);
       callback(null,1);
   },1000)
});
queue.tapAsync('2',function(data,callback){
    setTimeout(function(){
        console.log(2);
        callback(null,2);
    },2000)
});
queue.tapAsync('3',function(data,callback){
    setTimeout(function(){
        console.log(3);
        callback(null,3);
    },3000)
});
queue.callAsync('kbz',(err,data)=>{
    console.log(err,data);
    console.timeEnd('cost');
});
复制代码
  • promise型
class AsyncSeriesHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
        let promises=this.tasks.map(item => item());
        //将data传给下一个订阅者即可
        return promises.reduce((a,b) => a.then((data)=>b));
    }
}
let queue=new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
   return new Promise(function(resolve){
       setTimeout(function(){
           console.log(1);
           resolve(1);
       },1000)
   });
});
queue.tapPromise('2',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(2);
            resoleve(2);  
        },2000)
    });
});
queue.tapPromise('3',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(3);
            resolve(3);
        },3000)
    });
});
queue.promise('kbz').then(data=>{
    console.log(data);
    console.timeEnd('cost');
});
复制代码

结语：

tapable就是基于发布订阅机制实现的，这样能够用队列存储一系列的回调，在webapck的生命周期的各个阶段调用。

你可能感兴趣的:(webpack,ViewUI)

  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • 深入理解Webpack核心模块Tapable钩子[异步版] weixin_34413802 webpackjavascriptViewUI
    接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版)tapable中三个注册方法1tap(同步)2tapAsync(cb)3tapPromise(注册的是Promise)tapable中对三个触发方法1call2callAsync3promise这一章节我们将分别实现异步的Async版本和Promise版本异步钩子AsyncParallelHookAsyncParallelHo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • webpack插件开发必会Tapable web老猴子 webpack前端javascript
    认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
  • webpack的插件机制(Tapable) 若梦plus 前端工程化webpack前端
    webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
  • 四、webpack4.0 - tapable Razas WEBPACK4webpack4.0
    一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Tapable 信海利世 webpackwebpack前端
    一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • webpack怎么配置单页面或者多页面项目？ 镜中的女孩-potato webpack前端node.js
    单页直接在entry中指定单页面的入口文件即可，对于多页面来说，如果页面之间有依赖关系可以考虑将entry的值改成一个数组，数组中的每一项是入口文件的地址，并且通过dependOn配置多个入口的依赖关系，一般的，我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
  • fetch-event-source 如何通过script全局引入 cuiyuchen111 javascript前端
    fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法下载源码文件：https://github.com/Azure/fetch-event-source.git安装:npminstall--save-devwebpackwebpack-clits-loadertypescr
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南 Sam9029 Webpack前端webpack
    **‍‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案，还望指正！**附录中有脚手架文件夹目录大纲（Vue3+Webpack5）脚手架项目源码:https://github.com/sam9029/s9_webpack_g
  • webpack原理、优势、基本功能和常见问题 伟大的人民艺术家 javascriptes6
    webpack是一个模块打包工具，用它可以管理项目中的模块依赖，并编译出所需的静态文件。打包原理：webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。webpack构建流程初始化参数—>开始编译---->确定入口---->
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • 高级 - 总结 怕冷的火焰（~杰） nodejs和webpackwebpack
    高级总结:我们从4个角度对webpack和代码进行了优化:​1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示2.提升webpack打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快使用Include
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • Webpack和Vite的区别 南辞w 前端面试篇webpack前端node.js
    什么是webpack？webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。Webpack的打包构建流程Webpack会遍历你应用程序中的所有文件，并启动一个开发服务器，
  • CRACO 快速使用 小秀_heo React及其周边生态前端javascript
    GettingStarted|CRACOcraco是专门由于cra配置的重写，扩展配置cra（webpack）。安装依赖npmi-D@craco/craco根目录下创建craco.config.js和配置configure:my-app├──node_modules+├──craco.config.js└──package.jsoncraco.config.jsmodule.exports={de
  • 周末写点东西都是很困难的 焦糖大瓜子
    趁周末，也没有出去玩，回了趟家。看了一下VueCLI，也看了看阮大神写的webpack教程。webpack是一直想详细掌握的工具，需要系统学。学习一门技术，系统学习之后，那些重要和概念、设计的逻辑，也未必完全掌握，掌握的东西，也未必烂熟于心。终归要用于实际项目，反反复复，也就是常说的那个三境界：1.昨夜西风凋碧树，独上高楼，望断天涯路2.衣带渐宽终不悔,为伊消得人憔悴3.众里寻他千百度，蓦然回首，
  • WebAssembly studentliubo
    1、是什么WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。其实w9y不是用来一行一行撸的代码，它是一个编译目标。什么是编译目标？当我们编写TypeScript的时候，Webpack最后打包生成的Js文件就是编译目标。2、和JS的关系WebAssembly是被设计成JavaScript的一个完善、补充，而不是一个替代品。WebAssembly将很多编程语言带到
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他