Webpack 笔记参加字节跳动的青训营时写的笔记。这部分是范文杰老师讲的课。插一嘴：范文杰老师的公众号Tecvan有很多干活，可以关注一下。(下面的部分有好多都有很有用的扩展链接，偷懒，就直接把老师的公众号贴出来)1. 简介Webpack 本质上是一种前端资源编译、打包工具。功能：多份资源文件打包成一个 Bundle支持 Less、Babel、Eslint
......
454
0
0
2023-03-13
前端工程化和 webpack前端开发四大要点：模块化：js、css、资源的模块化组件化：UI 结构、样式、行为可复用规范化：目录结构、编码、接口、文档规范化、git 分支管理自动化：自动化构建、自动部署、自动化测试1. 前端工程化前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、经验等进行规范化、标准化。早期的前端工程化解决方案：gruntg
......
346
0
0
2023-03-13
目录一、webpack1.1 简介1.2 五大核心概念entry (入口)output (出口)loaderplugin (插件)mode (模式)二、配置及使用项目结构使用html-webpack-plugin三、写在最后一、webpack1.1 简介在最原始的前端开发中，我们引入js和css等文件都是通过手动地在html中插入script和link标签来
......
462
0
0
2023-02-04
先简单回顾下 webpack 原理Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏览器运行。loader 主要是对资源进行加载/转译的预处理工作
......
372
0
0
2023-01-13
前言当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。目录缩小范围noParseIgnorePlugin优化 resolve 配置externals缓存缩小范围在配置 loader 的时候，我们需要更精确的去指定 loader 的作用目录或者需要排除的目录，通过使用 inclu
......
345
0
0
2023-01-13
前言本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。一、基础配置接下来一起配置一个基础的 Webpack。将支持以下功能：分离开发环境、生产环境配置；模块化开发；sourceMap 定位警告和错误；动态生成引入 bundle.js 的 HTML5 文件；
......
310
0
0
2023-01-13
前言webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。一、准备工作在流程分析过程中我们会简单实现 webpack 的一些功能，
......
325
0
0
2023-01-08
引言围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。今天，我们来聊聊 Webpack 中必不可少的核心 Plugin 机制 ～Plugin本质上在 Webpack
......
358
0
0
2023-01-08