Webpack

没用过less，不怎么熟悉。搞个react项目用antd，报less无法解析。以为就堆一个less-loader就好了。 结果报错： 哦吼，不认识bezierEasingMixin()？搜了一下，提示

原始代码 Webpack配置 以下通过更改optimization.minimizer，并运行npx webpack，来查看不同压缩插件带来的效果。 Webpack内置压缩 Terser Uglify

以前常用的uglifyjs-webpack-plugin在webpack5项目里是没办法安装的，报依赖错误，要求降级到webpack^4。 而且只要配置上--mode=production，webpa

新建了一个项目，使用react webpack搭建，开发使用纯ts(x)。 在引入antd之后，为了tree shaking又配置了babel-plugin-import，webpack配置如下： 出

百度搜的话，有些文章提到是webpack-cli的版本问题，webpack-dev-server要求cli的版本为webpack-cli@^3。但在webpack5的前提下，npm会阻止你安装低版本cli。这也是我之前的一系列脚手架和文章都一直停留在webpack4的原因。 上…

记录一个问题的调研过程。 在研究webpack4和webpack5编译过程的不同，写了插件用于暴露整个编译过程，准备逐个研究hook的回调。插件代码如下： 全都是internal/*的错误。 先上百度搜一下，没啥结果，这个得吐槽了。 ，情况描述一摸一样。有人认为是node的bu…

做了一个组件，准备发布到npm。使用externals配置打包剔除的项目： 然后报错说找不到react。 刚开始以为是libraryTarget选错了，试了几个轮回，把所有的target类型都过了一边几乎，还是报错：要么是找不到react，要么是说hooks不能这么用。 更改e…

loader是一个function，使用commonjs导出。（模块管理、导出类型） loader的作用是转换资源。（函数需要返回值） loader这个函数需要使用this上下文，来使用LoaderAPI提供的接口。(不能是箭头函数） 代码剥离和代码压缩两个行为合并，偏离最初的…

以前有个错误认识：以为在webpack配置中，只要设置mode="production"即可以实现代码的压缩。不知道什么时候留下的这个错误印象，可怕。 本文结合splitChunks，记录一下本次对项目打包深度优化的过程。 因为webpack@^5的周边支持还不是很好，之前写插…

对antd这个庞然大物的优化，主要靠babel-plugin-import。 倒不是有多难，而是这个过程坑太多。 根据官网介绍，babelrc和babel-loader作为配置节点都OK，那么我选babel-loader。 上面配置是几经调较之后的最终形态，用了Button/M…

所谓dll：动态链接库。这本是个windows范畴的叫法。 这两天对webpack自带的DllPlugin和DllReferencePlugin两个插件做了一下研究，感觉在开发阶段的性能优化方面更适用。 这个方案的核心思想是空间换时间：先使用DllPlugin生成dll包（包含…

想学习一下写webpack插件，起步就遇到障碍。 从网上找了一个demo，是通过二次调用html-webpack-plugin来对index.html进行自定义修改。但运行时遇到报错。关键信息： 搜索了一下，资料不多，大致找到原因是webpack4对Tapable对象重写造成h…