2022年11月1日
webpack热更新原理(面试大概率会问)
摘要： 搭建webpack环境 创建一个项目 mkdir dev-erver && cd dev-server npm init -y // 快速创建一个项目配置 npm i webpack webpack-dev-server webpack-cli --save-dev mkdir src // 创建资 阅读全文
posted @ 2022-11-01 15:00 gogo2027 阅读(51) 评论(0) 推荐(0)
webpack配置优化,让你的构建速度飞起
摘要： 前言 越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 提升打包构建速度 减少代码体积 优化代码运行性能 提升打包构建速度 在进行打包速度优化之前，需要对当前项目每个部分的打包时间了解清楚。 阅读全文
posted @ 2022-11-01 14:59 gogo2027 阅读(162) 评论(0) 推荐(0)
webpack配置完全指南
摘要： 前言 对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 module 、 opt 阅读全文
posted @ 2022-11-01 14:58 gogo2027 阅读(46) 评论(0) 推荐(0)
2022年10月31日
Webpack配置实战
摘要： 前言 本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。 一、基础配置 接下来一起配置一个基础的 Webpack。 将支持以下功能： 分离开发环境、生产环境配置； 模块化开发； sourceMap 阅读全文
posted @ 2022-10-31 10:35 gogo2027 阅读(27) 评论(0) 推荐(0)
webpack实战，手写loader和plugin
摘要： 序言 对于 webpack 来说， loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢，单单止步于配置可能还不够。如果我们自己有时候想要 diy 一个需求，但是 webpack 又没有相关的 loader 和 plugin 。那这个时候我们可能就得开始造点轮子来供给自己使用了 阅读全文
posted @ 2022-10-31 10:34 gogo2027 阅读(97) 评论(0) 推荐(0)
webpack模块化的原理
摘要： commonjs 在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。 首先搞清楚commonjs模块化的处理方式，简单配置一下webpack，写两个模块编译一下看一下： webpack.config.js module.expor 阅读全文
posted @ 2022-10-31 10:33 gogo2027 阅读(57) 评论(0) 推荐(0)
2022年10月27日
Webpack最佳实践
摘要： 先简单回顾下 webpack 原理 Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏 阅读全文
posted @ 2022-10-27 15:26 gogo2027 阅读(29) 评论(0) 推荐(0)
Webpack构建速度优化
摘要： 前言 当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。 目录 缩小范围 noParse IgnorePlugin 优化 resolve 配置 externals 缓存 缩小范围 在配置 loader 的时候，我们需要 阅读全文
posted @ 2022-10-27 15:24 gogo2027 阅读(69) 评论(0) 推荐(0)
2022年10月26日
Webpack中的高级特性
摘要： 自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。 探索webpack的高级特性 特性：treeShaking 顾名思义treeShaking，就是摇树，那么体现在代码模块里面就是摇掉那些没有 阅读全文
posted @ 2022-10-26 14:43 gogo2027 阅读(50) 评论(0) 推荐(0)
Webpack完整打包流程分析
摘要： 前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。 一、准 阅读全文
posted @ 2022-10-26 14:39 gogo2027 阅读(147) 评论(0) 推荐(0)