Webpack
关注
分享
扫一扫
文章平均质量分 74
Webpack
Echoyya、
这个作者很懒，什么都没留下…
展开
-
webpack打包优化的几种手段
目录1. noParse2. 包含和排除目录3. IgnorePlugin4. happypack5. DllPlugin动态链接库6. 热更新7. 开发环境 tree-shaking8. 抽离公共代码9. 懒加载1. noParse作用主要是过滤不需要解析的文件，比如打包的时候依赖了三方库(jquyer、lodash)等，而这些三方库里面没有其他依赖，可以通过配置noParse不去解析文件，...原创 2022-09-08 19:22:00 · 161 阅读 · 0 评论 -
webpack4.15.1 学习笔记(十) — 常见 loader 使用
目录style -loader <= css-loader <= less-loaderpostcss-loaderfile-loaderurl-loaderhtml-withimg-loaderbabel-loaderexpose-loaderstyle -loader <= css-loader <= less-loaderstyle-loader ...原创 2022-09-05 19:23:00 · 149 阅读 · 0 评论 -
webpack4.15.1 学习笔记(九) — 11个基础的插件使用
目录html-webpack-pluginclean-webpack-pluginwebpack-manifest-pluginHotModuleReplacementPlugin(内置)mini-css-extract-pluginautoprefixeroptimize-css-assets-webpack-pluginuglifyjs-webpack-plugincopy-webpack-...原创 2022-08-29 20:47:00 · 178 阅读 · 0 评论 -
webpack4.15.1 学习笔记(八) — 缓存(Caching)
目录输出文件名(Output Filenames)缓存第三方库将 js 文件放到一个文件夹中webpack 打包模块化后的应用程序，会生成一个可部署的 /dist目录，只要 /dist 目录中的内容部署到 server 上，client(通常是浏览器)就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。通过命中缓存，降低...原创 2022-08-10 20:37:00 · 87 阅读 · 0 评论 -
webpack4.15.1 学习笔记(七) — 懒加载(Lazy Loading)
懒加载或者按需加载，是一种很好的优化网页或应用的方式。实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。在代码拆分的例子基础上，会在脚本运行时产生一个分离的代码块 lodash.bundle.js ，在技术概念上“懒加载”它。问题是加载这个包并不需要用户...原创 2022-08-08 19:41:00 · 163 阅读 · 0 评论 -
webpack4.15.1 学习笔记(六) — 代码拆分(Code Splitting)
目录入口起点防止重复动态导入(dynamic imports)代码拆分能够将代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码拆分可以用于获取更小的 bundle，以及控制资源加载优先级，会影响加载时间。常用的代码拆分方法：入口起点：使用 entry 配置手动地分离代码。防止重复：使用 CommonsChunkPlugin去重和分离 chunk。动态导入：通过...原创 2022-08-05 19:36:00 · 127 阅读 · 0 评论 -
webpack4.15.1 学习笔记(五) — 生产环境构建
目录生产环境构建指定环境生产环境构建development和production的构建目标差异很大。dev中，需要具有实时重新加载或HMR能力的 source map 和 server。而在prod中目标则关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，通常建议为每个环境编写彼此独立的webpack 配置。虽然将两者做了略微区分...原创 2022-08-02 20:40:00 · 109 阅读 · 0 评论 -
webpack4.15.1 学习笔记(四) — Tree shaking
目录Tree shaking原理标记效果副作用代码不可被删除如何实现 Tree shaking 的几种方法总结Tree shaking本质上为了消除无用的js代码，减少加载文件体积的方式，使其整体执行时间更短。无用的代码，又有另外一种叫法：Dead Code：代码不可到达，不会执行，如不可能进入的分支，return 之后的语句等代码中的某个变量只有写，而没有读操作Tree Shakin...原创 2022-07-28 22:01:00 · 145 阅读 · 0 评论 -
webpack4.15.1 学习笔记(三) — 模块热替换HMR
目录模块热替换 HMRHMR监听文件变化HMR 修改样式表模块热替换 HMR允许在运行时更新各种模块，而无需进行完全刷新。不适用于生产环境，意味着应当只在开发环境使用。启用HMR实际上就是更新 webpack-dev-server的配置，及使用 webpack 内置的 HMR 插件。webpack官方文档中介绍，使用HMR时，需要满足两个条件：配置devServer.hot为true配...原创 2022-07-23 17:42:00 · 123 阅读 · 0 评论 -
webpack4.15.1 学习笔记(二) — 配置及开发环境构建
目录基本安装配置文件管理资源管理输出构建一个开发环境使用 source map选择一个开发工具观察模式webpack-dev-serverwebpack-dev-middlewarewebpack 用于编译 JavaScript 模块。安装完成，就可以通过 webpack 的 CLI或 API与其配合交互。动态打包(dynamically bundle)所有依赖项，创建所谓的依赖图(depen...原创 2022-07-19 22:25:00 · 173 阅读 · 0 评论 -
webpack4.15.1 学习笔记(一) — 基本概念
目录入口(entry)出口(output)加载器 Loaders插件 Plugins模式webpack.config.js 配置终终终终于下定决心，对你下手了，系统的学习一下。webpack是一个应用程序的静态模块打包器(module bundler)。处理应用程序时，会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或...原创 2022-07-09 16:17:00 · 49 阅读 · 0 评论 -
Webpack3.x升级至 4.x 小记
近期项目部署遇到点问题，需要升级webpack版本，特此整理一小记，记录升级过程中的依赖包及报错处理。本次升级的依赖包及对应版本对照表：npm 包当前版本升级版本S/Dvue^2.5.18^2.6.14-Selement-ui^2.4.11^2.15.8 (为了解决el-date-picker 告警问题)-Scss-loader^0.26.4...原创 2022-06-27 21:08:00 · 174 阅读 · 0 评论 -
webpack性能优化方式之dll--- webpack.dll.config.js
通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更(除非是版本升级)，因此Webpack 打包时，对于一些不经常更新的第三方库，比如 vue、vue-router，vuex、lodash等，希望能和业务代码分离开，Webpack社区有两种方案CommonsChunk...原创 2022-06-26 15:34:00 · 303 阅读 · 0 评论 -
Webpack入门
一、什么是WebPack，为什么要使用它？模块打包机：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(less,Scss,TypeScript等)，并将其转换和打包为合适的格式供浏览器使用。可以使复杂的程序细化成为各个小的文件,为了简化开发的复杂度二、weback使用流程1、创建项目mkdir webpackDemo // 创建项目cd webpa...原创 2020-09-01 16:04:00 · 74 阅读 · 0 评论