10 2022 档案
摘要：前言 本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。 一、基础配置 接下来一起配置一个基础的 Webpack。 将支持以下功能： 分离开发环境、生产环境配置； 模块化开发； sourceMap
阅读全文
摘要：序言 对于 webpack 来说， loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢，单单止步于配置可能还不够。如果我们自己有时候想要 diy 一个需求，但是 webpack 又没有相关的 loader 和 plugin 。那这个时候我们可能就得开始造点轮子来供给自己使用了
阅读全文
摘要：commonjs 在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。 首先搞清楚commonjs模块化的处理方式，简单配置一下webpack，写两个模块编译一下看一下： webpack.config.js module.expor
阅读全文
摘要：先简单回顾下 webpack 原理 Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏
阅读全文
摘要：前言 当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。 目录 缩小范围 noParse IgnorePlugin 优化 resolve 配置 externals 缓存 缩小范围 在配置 loader 的时候，我们需要
阅读全文
摘要：自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。 探索webpack的高级特性 特性：treeShaking 顾名思义treeShaking，就是摇树，那么体现在代码模块里面就是摇掉那些没有
阅读全文
摘要：前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。 一、准
阅读全文
摘要：前言 手摸手教你如何打包，让你在动手的实践过程中感受webpack。 在动手之前，你可先简单了解一下webpack的概念 每一小结都有对应的分支，方便大家学习 webpack版本：5.58.1 入门 新建一个目录，初始化npm npm init 接下来安装webpack和webpack-cli两个包
阅读全文
摘要：大家有没有遇到过这些问题： webpack 打包之后的文件没有压缩 静态文件要手动拷贝到输出目录 代码中写了很多环境判断的多余代码 上一篇 「webpack 核心特性」loader 说到 webpack 的 loader 机制，本文主要聊一聊另外一个核心特性：插件(plugin)。 插件机制就是为了
阅读全文
摘要：前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。 一、准
阅读全文
摘要：引言 围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。 所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。 今天，我们来聊聊 Webpack 中必不可少的
阅读全文
摘要：大家有没有遇到过这些问题： webpack 打包之后的文件没有压缩 静态文件要手动拷贝到输出目录 代码中写了很多环境判断的多余代码 上一篇 「webpack 核心特性」loader 说到 webpack 的 loader 机制，本文主要聊一聊另外一个核心特性：插件(plugin)。 插件机制就是为了
阅读全文
摘要：一、前言 webpack 是一个现代 JavaScript 应用的静态模块打包器。那么 webpack 是怎样实现不同种类资源模块加载的呢？ 没错就是通过 loader。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或加载模块时预处理文件。 我们带着下面几个问题，
阅读全文
摘要：自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。 探索webpack的高级特性 特性：treeShaking 顾名思义treeShaking，就是摇树，那么体现在代码模块里面就是摇掉那些没有
阅读全文
摘要：前言 当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。 目录 缩小范围 noParse IgnorePlugin 优化 resolve 配置 externals 缓存 缩小范围 在配置 loader 的时候，我们需要
阅读全文
摘要：摇树（tree shaking） 我主要是想说摇树失败的原因（tree shaking 失败的原因），先讲下摇树本身效果 什么是摇树？ 举个例子 首先 webpack.config.js配置 const webpack = require("webpack"); /** * @type {webpa
阅读全文
摘要：前言 webpack 作为目前主流的前端构建工具，我们几乎每天都需要与它打交道。个人认为一个好的开源产品壮大的原因应该包括核心开发者的稳定输出以及对应生态的繁荣。对于生态来说， webpack 是一个足够开放的类库，提供了可插拔的方式去自定义一些配置，包括配置 loader 和 plugin ，本篇
阅读全文
摘要：开发环境 const webpack = require("webpack"); const path = require('path') module.exports = { // entry: { // a: './src/0706/a.js', // c: './src/0706/c.js',
阅读全文
摘要：前言 手摸手教你如何打包，让你在动手的实践过程中感受webpack。 在动手之前，你可先简单了解一下webpack的概念 每一小结都有对应的分支，方便大家学习 webpack版本：5.58.1 入门 新建一个目录，初始化npm npm init 接下来安装webpack和webpack-cli两个包
阅读全文
摘要：前言 本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。 一、基础配置 接下来一起配置一个基础的 Webpack。 将支持以下功能： 分离开发环境、生产环境配置； 模块化开发； sourceMap
阅读全文
摘要：先简单回顾下 webpack 原理 先简单回顾下 webpack 原理 Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和
阅读全文
摘要：搭建webpack环境 创建一个项目 mkdir dev-erver && cd dev-server npm init -y // 快速创建一个项目配置 npm i webpack webpack-dev-server webpack-cli --save-dev mkdir src // 创建资
阅读全文
摘要：commonjs 在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。 首先搞清楚commonjs模块化的处理方式，简单配置一下webpack，写两个模块编译一下看一下： webpack.config.js module.expor
阅读全文
摘要：当项目越来越复杂时，会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事，下面我们就从速度和体积两方面来探讨构建优化的策略。 分析工具 在优化之前，我们需要了解一些量化分析的工具，使用它们来帮助我们分析需要优化的点。 webpackbar webpac
阅读全文
摘要：前言 越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 提升打包构建速度 减少代码体积 优化代码运行性能 提升打包构建速度 在进行打包速度优化之前，需要对当前项目每个部分的打包时间了解清楚。
阅读全文
摘要：概念 来看一下官网对webpack的定义： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将
阅读全文
