![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 86
webpack学习笔记
coderlin_
幸运=99%的努力+1%的运气
展开
-
dumi组件库打包总结
最近在做页面抽成组件然后发布,期间也是遇到了很多问题和坑,现在顺便分享一下。dumi官网dumi为组件开发场景而生的文档工具,这里注重分享打包的过程,fatherdumi使用father打包,father文档1 使用rollup打包的时候报错。father提供了几种打包的方式,umd, cjs, esm。也支持使用rollup或者babel来打包成cjs/esm。一开始选择的是rollup来打包。出现的问题:rollup只支持esmodule,不支持commonjs,如果你的组件库引用原创 2022-04-26 17:34:49 · 4264 阅读 · 3 评论 -
编译原理2-语法分析-支持减除小括号
语法分析-支持减法除法小括号语法规则 加上减法除法规则就变了add -> minus | minus + add // 加法被 减法 | 减法+加法替换minus -> multiple | mulitple +|- add 减法被 乘法 或者 乘法加减加法multiple -> primary | primary *|/ multiple 乘法 被 Number 或者 Number 乘除 乘法primary -> NUMBER | (add) primar原创 2022-04-01 23:11:32 · 407 阅读 · 0 评论 -
ast编译原理-2-语法分析-简单的加乘分析
经过上一篇,通过有限状态机的概念编写了tokenzier,实现了简单的jsx语法分词。接着需要进行语法分析阶段。语法分析了解语法分析的原理和递归下降算法递归下降算法原创 2022-03-31 23:52:05 · 790 阅读 · 0 评论 -
ast编译原理-1-词法分析
编译原理实现jsx语法转成js语法的编译器。如将<h1 id=“title”><span>hello</span>world</h1>转成React.createElement("h1", {id: title}, React.createElement("span", null, hello),"world")步骤差不多就是,jsx代码->ast -> 处理转换ast -> ast生成js代码 -> js代码原创 2022-03-29 23:43:56 · 2322 阅读 · 0 评论 -
vite实战
Pnpm很好的文章pnpm相对比npm和yarn有很大速度的提升。因为:对于每个项目的依赖,yanr和npm会根据package.json每次都去下载依赖,导致项目越多,依赖就代码就越多。而对于pnpm,他会通过hard link的模式,在计算机的虚拟硬盘目录下创建一个store目录,将依赖存放到里面去,下次另一个项目需要某些依赖的时候,pnpm会直接来这store目录获取到代码,就不用重复下载。对于版本不同的依赖,版本之间不同的文件会被存储起来。例子:在项目中安装express依赖。在项原创 2022-03-28 22:00:14 · 737 阅读 · 0 评论 -
rollup打包工具
Rollupwebpack的打包比较繁琐,打包体积比较大。rollup主要是用来打包js库的。vue/react等都在用rollup作为打包工具。使用安装依赖yarn add @babel/core @babel/preset-env @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript loadsh rollup rollup-plugin-babel postcss rollup-plu原创 2022-03-27 14:16:13 · 3207 阅读 · 0 评论 -
webpack模块联邦
模块联邦weback的模块联邦原理和import()相似,也是promise的原理。,通过webpackjsonp加载异步代码,只不过,获取异步代码变成发请求去其他项目获取代码而已。动机模块联邦得动机是为了不同开发小组间开发一个或者多个应用。应用将被划分为更小的应用快,一个应用快,可以是比如头部导航或者侧边栏得前端组件。也可以是数据获取逻辑得逻辑组件每隔应用块由不同得组开发应用或应用块共享其他应用块或库。过程每个应用亏块都是一个独立得构建,这些构建都将编译成容器。容器可以被其他应用或原创 2022-03-26 23:01:32 · 2553 阅读 · 0 评论 -
《webpack实战调优进阶》 part2 优化部分
代码分片实现高性能应用其中重要的一点就是尽可能地让用户每次只加载必要的资源,优先级 不太高的资源则采用延迟加载等技术渐进式地获取,这样可以保证页面的首屏速度。代码分片可以把代码按照特定的形式进行拆分,使用户不必一次全部加载,而是按需加载。CommonsChunkPlugin webpack4之前内部自带的插件(基本没用了)提取react// webpack.config.jsconst webpack = require("webpack");module.exports = { entr原创 2022-01-04 19:53:26 · 611 阅读 · 0 评论 -
webpack书本总结,入门webpack必备(1)
观看了《webpack实践,进阶调优》的书本,记下了一下认为重要的笔记,可能对你也有用正文开始:commonjs与esmodule区别:1 commonjs模块依赖关系的建立发生在代码运行阶段; esmodule模块依赖关系的建立发生在代码编译阶段 - esmodule的优点 1 esmodule可以“死代码检测和排除”通过静态分析可以在打包时去掉这些未曾使用过的模块,以减小打包资源体积。 2 模块变量类型检查 ES6 Module的静态模块结构有助于.原创 2021-12-23 18:55:39 · 1049 阅读 · 0 评论 -
深入webpack学习(2) devServer babel-loader asset
开发服务器 //配置开发服务器 devServer: { static: { //真实的含义:配置额外的静态文件的目录,相当于express的开放静态资源目录,可以从浏览器从http://localhost:8080/xx.jpg //就是来static文件中寻找的。 //contentBase: path.resolve(__dirname, "static"), // static: ['static']原创 2021-11-22 08:41:33 · 381 阅读 · 0 评论 -
深入webpack学习(1)
npm run build问:npm run build的时候做了什么?答:1 首先找到package.json中的命令行,执行webpack命令。2 执行webpack命令,会先查看node_modules/.bin/webpack.cmd是否存在,存在就执行它。不存在就执行全局目录下的webpack.cmd。3 找到webpack.cmd之后,会读取当前目录下的webpack.config进行编译。多入口entry可以是数组。会一起打包。多个入口:可以是多个入口,但是输出的名字必原创 2021-11-17 22:36:58 · 736 阅读 · 0 评论 -
webpack5 配置 13(性能优化)Tree shaking Http压缩 html压缩, runtime压缩, 封装library
Tree shaking树摇晃,比如一颗树上的果子已经成熟了,那么他就不需要在树上了,摇晃着下来,树也会变得简洁。代码的话,比如一些代码如函数,定义后但是没有用到,那么这个代码就不会被打包。Tree shaking,计算机表示消除dead-code。用于消除未调用的代码,因为纯函数无副作用,所以可以放心消除,这也是为什么要尽量使用纯函数进行编程。Js中的Tree shaking主要是源自rollup工具。这是因为Tree shaking是依赖于ES MODULE的,因为ES module是静态分析原创 2021-04-11 15:13:58 · 1030 阅读 · 0 评论 -
webpack5 17 gulp工具的使用
Vue脚手架(文中部分图片来自coderwhy老师)vue create xxx当我们执行npm run serve后,脚手架做了什么事。执行vue-cli-service 并且传入了serve这个文件主要做的事情就是创建一个service类,然后执行run方法。vue脚手架启动cli-serve加载配置文件的过程Gulp的使用这是官网的一张图他做的事情就是比如ts转为js,png转为webp,mk转为html文件。与webpack的区别...原创 2021-04-20 16:01:08 · 244 阅读 · 0 评论 -
webpack5基础配置 (3)打包其他资源 asset module type资源类型
资源模块类型(asset module type)上一篇说了webpack5打包其他资源已经可以不用到file-loader与url-loader了。webpack5可以使用 资源模块类型(asset module type),替代file-loader等。资源模块类型通过添加四种新的模块类型,来代替Loader1 asset/resource 发送一个单独的文件并导出URL,替代file-loader2asset/inline 导出一个资源的data URL,替代url-loader3asse原创 2021-03-23 22:25:03 · 5483 阅读 · 2 评论 -
webpack5 基础配置 (5)深入认识source-map,初始babel
在第四章的时候初步认识了一下source-map,知道他是来帮我们映射源代码文件的,接着继续深入学习devtool可以设置非常多的值,通常用它来设置source-map。我们主要了解几个关键的。1false设置为false,则表示不生成source-map2 none在开发模式下,设置为none会报错。none只能在生产模式生成,效果跟false差不多,他的意思是省略devtool。其实mode设位production时,devtool默认值已经是none。mode为development时,原创 2021-03-27 23:36:31 · 2676 阅读 · 1 评论 -
webpack5 基础配置(2) postcss使用 file-loader
第一小节讲了browserslist的作用,接下里讲Postcss这个插件有什么用呢?1 可以通过js来转换css样式如适配,加前缀,css的重置等等2 postcss本身功能很少,需要借助其他插件。如何使用呢?1 查找postcss工具的扩展,比如webpack的postcss-loader,2 安装对应功能的postcss插件。先来看基本使用原生postcss插件需要借助postcss-cli使我们能在命令行控制cnpm install postcss -Dcnpm install原创 2021-03-22 23:04:19 · 3023 阅读 · 6 评论 -
webpack5 基础配置8 devServer 模块热替换HMR, 框架的HRM, HRM原理
dev Server之前运行一直是手动打开页面,修改代码后,每次都要run build非常麻烦。第一种是通过watch来解决,每次代码一修改就自动编译然后重新渲染。可以看到刚我们修改了代码,重新自动编译了。第二种写法但这种方式也有弊端。目前我们使用的是watch监听代码的改变从而重新编译生成新的Build,然后通过vscode的插件,live-server监听文件的变化,从而重新渲染页面。但其实效率不高,因为只要有一个文件改变,所有源代码都要重新编译,要重新生成新的Bundle.js文件,l原创 2021-04-04 00:23:30 · 2041 阅读 · 0 评论 -
webpack5 基础配置 11 性能优化 预加载预请求,cdn shimming
动态导入的懒加载像很多vue,react路由懒加载就是这样的,通过()=>import(’./xxx’)实现路由一个懒加载实现一个组件懒加载打包后的文件在这可以看到一开始是没有加载我们的element.js文件的,当我们点击后...原创 2021-04-07 23:41:58 · 1724 阅读 · 0 评论 -
webpack5 基础配置(4上)模块化原理commonjs esmodule原理。
Mode配置之前我们打包的时候一直报错,mode属性没有设置。看下基本配置mode错误在官网这里可以查到相关信息。mode可以有三个取值,development production(默认) none我们默认是设置为production,生产模式,顾名思义要上线了,为了性能优化,要压缩,所以webpack会进行丑化。当我们设置为development时,会开发模式,开发模式暂时不上线所以无需丑化。打包后可以看到就是正常的js文件没有被压缩过。这三个取值的含义以及不同取值的结果原创 2021-03-25 00:18:39 · 1543 阅读 · 0 评论 -
webpack5 基础配置 (6)深入解析Babel以及在webpack的使用
上一章说到了babel-cli来帮助我们编译文件,但是真实开发中都是通过webapck配置,一次性全部打包完成的。但我们现在没有配置webpack的基础下来Build一下。可以看到bundle.js文件中,webpack只是帮我们实现了一个函数作用域,而没有转换es6的代码。如果想转成es5,就要通过配置了。babel是一个工具,功能很少,但能通过插件如@babel/preset-env来壮大其功能。如果只有一个babel-loader时,是不能正确转化es5的。必须借助插件。使用了@babel原创 2021-03-29 23:50:27 · 2356 阅读 · 0 评论 -
webpack5 配置14 打包分析+webpack源码
打包时间的分析我们执行build后,显示了一个总的时间,根据我们电脑配置不同,node版本不同,webpack不同,打包的时间肯定是有出入的。但是我们想知道每个阶段,每个插件或者每个Loader所消耗的时间。这里可以借助一个插件,speed-measure-webpack-plugin,但这个插件与部分插件存在兼容性问题,所以使用的时候要注意让不兼容的插件不显示他的打包时间就可以了。cnpm install speed-measure-webpack-plugin -D这个插件的使用有点特殊,他原创 2021-04-13 12:26:11 · 710 阅读 · 0 评论 -
webpack5 基础配置10性能优化环境分离和代码分离
环境分离像我们之前配置都是些在webpack.config.js文件的,但是比如开发环境下,某些配置是不需要的,如插件。生产模式下我们的devServe的配置也是不要的。所以现在我们把webpack.config.js分离成三个文件,一个是开发的,一个是生产环境的,一个是公共的。另外我们执行npm run serve也需要配置,因为默认是会找到package.json所在的目录下的webpack.config.js文件去执行。在配置后面加上–config 再加上文件名即可。这样就会找到在packag原创 2021-04-06 22:15:23 · 821 阅读 · 1 评论 -
webpack5 基础配置 loader的认识 css-loader
webpack5之前也是一直对webpack有大概的了解,没有一个全面的学习,现在忙完答辩了,好好从头到尾学习一下。webpack是一个静态的模块打包工具,顾名思义就是支持模块化,将我们的文件打包成静态资源如js css png等资源让我们放到静态资源服务器上。webpack的打包机制:webpack会找到我们的入口文件,从入口文件开始,一步一步找到应用程序所需要的所有模块,生成一张依赖关系图,然后根据依赖关系图打包所有的模块。(不同的文件对应不用的loader打包),如果不在依赖关系图中的模块,是原创 2021-03-21 16:29:31 · 2398 阅读 · 0 评论 -
webpack5 基础配置(7) eslint-ts的使用和在webpack中的配置 加载vue文件
上一节最后讲到了typescript的使用,ts-loader本质上也是利用与tsc,所以安装ts-loader的同时需要安装typescript。如果你没安装typescript,在你安装ts-loader的时候,会根据ts-loader的依赖继续安装typescript继续上节的问题,ts中使用Promise等特性,tsc会自动加上profill吗?答案是不会。所以我们要通过babel来编译babel不需要依赖ts-loader。只有babel-loader是不够的,我们还需要借助预设,类似于原创 2021-04-01 00:53:05 · 1797 阅读 · 1 评论 -
webpakc5 (15) webpack源码第二部分 自定义loader
Module的build阶段上次后面讲到的模块的build方法,就是这里。这个build的最主要的代码就是duBuildreturn this.doBuild(options, compilation, resolver, fs, err => { // if we have an error mark module as failed and exit if (err) { this.markModuleAsErrored(err); this._initBuil原创 2021-04-20 00:28:01 · 297 阅读 · 0 评论 -
webpack5 基础配置(性能优化)12 DLL Terser Scope Hoisting
认识DLL库(了解)DLL全称是 动态链接库,是为软件在winodw种实现共享函数库的一种实现方式,而Webpack也内置了DLL的功能,为的就是可以共享,不经常改变的代码,抽成一个共享的库。这个库在之后的编译过程中,会被引入到其他项目的代码中。比如,我们可以对react/react-dom进行单独编译成一个dll库,然后在接下来的要使用react的项目中直接引入这个库,因为react/react-dom已经编译过了的,所以不用再对react进行编译。vue等等也可以。DLL使用分成两部1 单独打包原创 2021-04-10 00:01:12 · 1560 阅读 · 0 评论 -
webpack5 基础配置 9 devServe的基本配置
output配置的publicPathoutput的path中是指定打包后的文件放在哪个位置,而publicPath是决定打包后的html怎么引入Js文件。src的路劲是 publicPath+pathpublicPath默认是个空字符串。当是一个空字符串时,这里的bundle.js,因为我们是在devserver启动的,所以默认会添加上域名。一般的查找路径就是域名+publicPath+bundle.js,因为publicPath默认是空字符串,所以就是http://localhost原创 2021-04-05 23:30:25 · 2831 阅读 · 0 评论 -
Webpack配置
Webpackwebpack依赖于Node,故要先装node,在用Node的npm工具安装webpack1打包文件准备,main.js打包成bundle.js创建一个webpack.config.js文件首先引入path模块拼接路径接着导出module.export={//输入entry:‘main.js’//输出output:{path:path.join(__dirname,‘dist’) //输出的那个文件所在的位置filename:'bundle.js’文件名}}接原创 2020-10-31 22:01:41 · 872 阅读 · 1 评论 -
webpack5 16 自定义plugin, react脚手架
tapable听过阅读webpack的源码可以知道webpack有两个很重要的对象,一个是complier,一个是compilation,他们通过注入的方式来监听webpack的所有声明周期,插件的注入离不开hooks,而他们的hook也都是创建了tapable的各种hook实例而已。Tapable是管理者需要的hook,这些hook可以被应用到我们的插件中。这个tapable给我们提供的hook如何使用呢?cnpm install tapable -D最基本的使用asyncHook,在构造函原创 2021-04-20 15:04:22 · 478 阅读 · 0 评论 -
webpack5 基础配置(4下)模块化原理 && 初识source map
3 commonjs引用esmodule前面我们讲了webpack实现模块化得原理,分别是commonjs esmodule,现在讲一下commonjs引用esmodue。先看例子esmodule导出commonjs引入。打包成功,正常显示看下源码。var __webpack_modules__ = { "./src/js/main.js": function ( __unused_webpack_module, __webpack_exports__, __we原创 2021-03-25 21:56:04 · 493 阅读 · 0 评论