草庐IT

webpack-demo

全部标签

【前端必会】走进webpack生命周期,另类的学习方法

背景webpack构建过程中的hooks都有什么呢?除了在网上看一些文章,还可以通过更直接的办法,结合官方文档快速让你进入webpack的hook世界写一个入口文件//index.jsconstwebpack=require("webpack");constpath=require("path");constPrintHooksPlugin=require("./PrintHooksPlugin");constconfig={context:path.resolve(__dirname),mode:"production",optimization:{minimize:false,},entr

【前端必会】tapable、hook,webpack的灵魂

背景什么是tapable、hook,平时做vue开发时的webpack配置一直都没弄懂,你也有这种情况吗?还是看源码,闲来无聊又看一下webpack的源码,看看能否找到一些宝藏tapable和webpack没有特定关系,可以先看下这篇文章,了解下这个小型库https://webpack.docschina.org/api/plugins/#tapablehttps://blog.csdn.net/mafan121/article/details/1131200814.下面记录下寻宝过程开始执行一次webpack经历了什么,先看一下代码我们分析一下4点引用了webpack我们使用的配置文件调用w

【前端必会】tapable、hook,webpack的灵魂

背景什么是tapable、hook,平时做vue开发时的webpack配置一直都没弄懂,你也有这种情况吗?还是看源码,闲来无聊又看一下webpack的源码,看看能否找到一些宝藏tapable和webpack没有特定关系,可以先看下这篇文章,了解下这个小型库https://webpack.docschina.org/api/plugins/#tapablehttps://blog.csdn.net/mafan121/article/details/1131200814.下面记录下寻宝过程开始执行一次webpack经历了什么,先看一下代码我们分析一下4点引用了webpack我们使用的配置文件调用w

Webpack的使用

简介Webpack是一个其那段资源加载/打包工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源作用可以将多种静态资源js、css、less转换成一个静态文件,减少了页面的请求使用方式全局安装Webpack(尽量在项目目录中执行cmd命令)npminstall-gwebpackwebpack-cli在项目目录的js目录中创建几个js文件(之间的关联任意)。例如common.js、index.js、about.js、main.js(入口js文件)等等打包(只打包js文件)在项目根目录中创建配置文件webpack.config.js(文件名最好固定,内容结构固定

Webpack的使用

简介Webpack是一个其那段资源加载/打包工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源作用可以将多种静态资源js、css、less转换成一个静态文件,减少了页面的请求使用方式全局安装Webpack(尽量在项目目录中执行cmd命令)npminstall-gwebpackwebpack-cli在项目目录的js目录中创建几个js文件(之间的关联任意)。例如common.js、index.js、about.js、main.js(入口js文件)等等打包(只打包js文件)在项目根目录中创建配置文件webpack.config.js(文件名最好固定,内容结构固定

从零实现在线云相亲APP|程序员脱单神器(内附源码Demo)

实时音视频通话涉及到的技术栈、人力成本、硬件成本非常大,一般个人开发者基本无法独立完成一个功能健全并且稳定的实时音视频应用。本文介绍一天之内,无任何实时音视频低层技术的android开发者完成实时相亲房APP,效果如下:笔者从搜索引擎上搜了一些第三方库,综合对比了一下,最终选择了即构)。因为一方面他们提供了非常全的音视频通话能力,视频通话SDK使用起来也非常简单;另一方面他们每个月提供了10000分钟的免费额度,对于个人开发者来说足够用了。如果超过了免费额度,说明应用有一定的流量了,到那时候花点钱扩一下容量就好。详细开发文档请参考https://doc-zh.zego.im/article/7

从零实现在线云相亲APP|程序员脱单神器(内附源码Demo)

实时音视频通话涉及到的技术栈、人力成本、硬件成本非常大,一般个人开发者基本无法独立完成一个功能健全并且稳定的实时音视频应用。本文介绍一天之内,无任何实时音视频低层技术的android开发者完成实时相亲房APP,效果如下:笔者从搜索引擎上搜了一些第三方库,综合对比了一下,最终选择了即构)。因为一方面他们提供了非常全的音视频通话能力,视频通话SDK使用起来也非常简单;另一方面他们每个月提供了10000分钟的免费额度,对于个人开发者来说足够用了。如果超过了免费额度,说明应用有一定的流量了,到那时候花点钱扩一下容量就好。详细开发文档请参考https://doc-zh.zego.im/article/7

webpack版本不一至导致的 Uncaught TypeError:n is not a function at window.webpackJsonp 错误

经查,发现我们开发的程序是用webpack打包发布的,而该页面在微信小程序打开时,对方注入了几个微信相关的js脚本,而该脚本也是使用webpack打包生成的。双方的js代码导致window.webpackJsonp被重复定义。当两者的webpack版本不同时,生成的window.webpackJsonp,并不一致:3.x版,该对象为函数,4.x版(不确定),该对象为数组。所以调用该对象时就产生了上面的错误。搜索引擎搜索一通,发现在webpack配置文件中加入以下配置,即可绕过该对象重复定义问题output:{jsonpFunction:"webpackJsonpFunction3f"}从web

webpack版本不一至导致的 Uncaught TypeError:n is not a function at window.webpackJsonp 错误

经查,发现我们开发的程序是用webpack打包发布的,而该页面在微信小程序打开时,对方注入了几个微信相关的js脚本,而该脚本也是使用webpack打包生成的。双方的js代码导致window.webpackJsonp被重复定义。当两者的webpack版本不同时,生成的window.webpackJsonp,并不一致:3.x版,该对象为函数,4.x版(不确定),该对象为数组。所以调用该对象时就产生了上面的错误。搜索引擎搜索一通,发现在webpack配置文件中加入以下配置,即可绕过该对象重复定义问题output:{jsonpFunction:"webpackJsonpFunction3f"}从web

typescript+webpack+api-extractor构建一个js库

依赖说明入口文件tsconfig配置webpack配置文件webpack入口文件配置webpack为typescript和less文件配置各自的loaderwebpack的output配置运行webpack进行打包测试验证输出esm模块已经输出了umd格式的js了,为什么还要输出esm模块?----TreeShaking用tsc输出esm和类型声明文件完善package.json文件package.json中添加exports配置声明模块导出路径用api-extractor提取出干净的.d.ts配置使用APIextractor更新package.json用@internal标注只希望在内部使用