gogo2027

自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。 探索webp...

前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5...

引言 围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。 所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来...

一、前言 webpack 是一个现代 JavaScript 应用的静态模块打包器。那么 webpack 是怎样实现不同种类资源模块加载的呢？ 没错就是通过 loader。l...

当项目越来越复杂时，会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事，下面我们就从速度和体积两方面来探讨构建优化的策略。...

大家有没有遇到过这些问题： webpack 打包之后的文件没有压缩 静态文件要手动拷贝到输出目录 代码中写了很多环境判断的多余代码 上一篇 「webpack 核心特性」lo...

谈谈你对webpack的看法 webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,...

前言 前端性能优化是一个老生常谈的话题，关于性能优化的技术文档和书籍都特别多。如果大家想深入学习前端性能优化相关内容，有以下推荐 雅虎军规35条 某东上搜“前端性能优化”，...

前言 webpack 作为目前主流的前端构建工具，我们几乎每天都需要与它打交道。个人认为一个好的开源产品壮大的原因应该包括核心开发者的稳定输出以及对应生态的繁荣。对于生态来...

前言 对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单...

摇树（tree shaking） 我主要是想说摇树失败的原因（tree shaking 失败的原因），先讲下摇树本身效果 什么是摇树？ 举个例子 首先 webpack.co...

开发环境 生产环境 参考webpack视频讲解：进入学习 自动添加CSS前缀 使用postcss-loader + autoprefixer 添加postcss.confi...

commonjs 在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。 首先搞清楚commonjs模块化...

搭建webpack环境 创建一个项目 目录结构 webpack版本 这里说明一下，webpack4和webpack5的配置信息或者显示信息可能有点区别 编写配置文件 新建文...

前言 越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 提升打包...

前言 当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。 目录 缩小范围 noParse ...

前言 本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。 一、基础配...

序言 对于 webpack 来说， loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢，单单止步于配置可能还不够。如果我们自己有时候想要 diy 一...

前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5...

引言 围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。 所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来...