Webpack5 系列
文章平均质量分 93
本专栏主要撰写工程化相关的 Webpack5 系列,如需转载请注明出处。
「已注销」
这个作者很懒,什么都没留下…
展开
-
Webpack5 系列(一):基础篇
theme: jzmanhighlight: atelier-cave-light一、前言基础篇主要围绕以下几点展开:为什么会使用 Webpack?Webpack 打包流程Webpack 的本源Webpack 的配置文件简化 Webpack 打包流程1. 简单案例在前端开发中,如果一个页面的逻辑非常多,那么我们就有必要做业务逻辑的划分。例如,一个网页包含...原创 2021-07-31 11:34:39 · 35 阅读 · 0 评论 -
Webpack5 系列(二):静态资源的处理
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲解了 webpack5 的基础配置。这一篇文章将会介绍如何利用 webpack 中的 Loaders 对静态资源做处理,Loaders 是 webpack 的核心概念之一。静态资源主要包括以下几方面的内容:样式文件(CSS)图片(Images)字体(Fonts)数据文件...原创 2021-08-08 21:26:33 · 134 阅读 · 0 评论 -
Webpack5 系列(三):开发环境的设置
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到如何处理静态资源,本篇将更进一步,介绍如何打造一个基础而不失效率的开发环境。关键词:HtmlWebpackPlugin、Source Map、Dev Server、Hot Module Replacement。二、Plugins - 快捷打包如果说,Loader 的作用是...原创 2021-08-16 20:49:24 · 44 阅读 · 0 评论 -
Webpack5 系列(四):Babel 的配置
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到如何配置一个基本的开发环境。本篇将介绍对于项目中 JS 文件的处理。二、babel-loaderindex.js```js// 箭头函数const add = (a, b) => a + b;// Promise 对象const promise1 = ne...原创 2021-08-22 17:46:21 · 178 阅读 · 0 评论 -
Webpack5 系列(五):Tree Shaking
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到对JS语法的处理,本篇将介绍 Tree Shaking 。```jsx// math.jsconst add = (a, b) => a + b;const minus = (a, b) => a - b;export { add, minus}//...原创 2021-09-05 12:15:03 · 95 阅读 · 0 评论 -
Webpack5 系列(六):不同模式的区分打包
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到 Tree Shaking 相关的内容,本篇将介绍在不同模式(或称环境)下的打包处理。二、不同环境下的打包配置1. 开发环境的配置```jsconst path = require('path');const HTMLWebpackPlugin = require('...原创 2021-09-07 21:47:31 · 57 阅读 · 0 评论 -
Webpack5 系列(七):代码分离
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到不同模式下的打包配置,本篇将介绍代码分离(Code Splitting)。jsx// index.jsimport _ from 'lodash';let element = document.createElement('div');element.innerHTML ...原创 2021-09-11 20:25:45 · 85 阅读 · 0 评论 -
Webpack5 系列(八):库的打包
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到代码分离,本篇将介绍库的打包。Webpack 除了能够打包项目应用以外,还可以用来打包 JS 库。当其他人安装了我们的库时,他们可能会在不同的环境中去引入,例如:```jsximport lib from 'lib'; // ESMconst lib = requi...原创 2021-09-28 07:29:26 · 72 阅读 · 0 评论 -
Webpack5 系列(九):TS 打包配置
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到库的打包,本篇将介绍 TypeScript 的打包配置。二、TSTypeScript 是 JavaScript 类型的超集,它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts,就需要安装特定的 loader 来“翻译” ts 语法。2...原创 2021-11-09 19:36:13 · 114 阅读 · 0 评论