webpack
文章平均质量分 78
LYFlied
这个作者很懒,什么都没留下…
展开
-
webpack5做了哪些优化(新特性)
- 构建速度优化- 代码体积优化- 持久化缓存优化- Module Federation一、构建速度优化二、包代码体积的优化1.代码分割splitchunk2.Tree Shaking3.剔除npm包里面针对Node.js模块自动引用的Polyfills三、持久化缓存的优化四、模板联邦原创 2021-03-30 21:42:39 · 2940 阅读 · 4 评论 -
webpack-loader机制以及模拟实现
Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别的模块。loader和plugin区别链式调用多个loader模拟loader实现模拟一模拟二原创 2021-03-30 20:35:05 · 3176 阅读 · 15 评论 -
webpack核心概念和构建流程(附图)
文章目录一、核心概念EntryOutputModuleChunkLoaderPlugin二、构建流程一、核心概念Entry入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。Outputoutput 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为原创 2021-03-30 20:01:38 · 749 阅读 · 2 评论 -
Webpack5打包-禁止生成LICENSE文件
问题背景最近将项目中的Webpack3升级到了Webpack5,打包之后发现输出文件中多了一些LICENSE文件,如下图所示:看着就感觉怪怪的,和升级之前的输出文件不一样,总感觉是那处了问题,于是查阅资料…问题分析多输出了一些文件,那这可能是打包的输出配置出了岔子或者是用的插件中配置不太对。于是检查自己的配置…没发现什么问题呀…没看到有啥配置会让我打包输出这些文件的…于是再仔细看看官方文档吧。果然在这里发现了蛛丝马迹:Webpack 5 默认压缩代码工具为terser-webpack-原创 2021-03-05 10:09:52 · 5989 阅读 · 7 评论 -
多页面项目优化webpack打包降低上线风险
目前的问题项目中有多个入口,某些入口会提供出去给其他项目使用。这就要求项目的稳定性要高,如果出了问题可能会导致其他的相关联项目也无法正常使用。(要背锅)由于目前整个项目的打包文件用的同一套版本号,导致当对某个组件进行了修改,进行打包后,所有模块的版本号都会更新,缓存将不能使用,所有模块都将更新,这会给项目上线带来一些风险。不得不每次上线之后都去对所有的服务进行验证,哪怕是不涉及改动的,由于版本号更新了,也需要再去线上验证一下有没有问题。目标优化webpack打包配置,不同入口所打包出来的文件使用独原创 2021-02-07 17:54:33 · 943 阅读 · 3 评论 -
升级webpack5过程中遇到的坑
将项目的weback从3升到了5,遇到了一系列的问题,这里记录两个:extract-text-webpack-plugin兼容问题webpack-dev-server兼容问题1.extract-text-webpack-plugin兼容问题升到webpack5后,运行打包直接报错,如下:原因是:webpack4以上的版本不再使用“extract-text-webpack-plugin”,应该改成用“mini-css-extract-plugin”解决原代码:const ExtractT原创 2021-02-04 19:49:39 · 2577 阅读 · 2 评论 -
webpack升级与优化之路
webpack升级与优化之路;升级webpack5遇到的坑;webpack打包优化;extract-text-webpack-plugin;webpack-dev-server兼容;分模块独立版本号打包多页面项目;chunkhash原创 2021-03-16 20:42:12 · 921 阅读 · 5 评论