头图

SegmentFault 思否技术周刊 Vol.64 — 浅谈如何使用 Webpack ?

本期技术周刊一起了解 Webpack ,欢迎大家阅读 ~

文章推荐

《详解 Webpack devtools》 作者:Shenfq

最近在开发一个低代码平台,主要用于运营搭建 H5 活动。这中间涉及到第三方组件的开发,而第三方组件想要接入平台,需要经过我们特定的打包工具来 build。构建之后的组件,会合并成单个的 js 文件,而且代码会被压缩会混淆,这个时候如果需要调试,那就会极其痛苦。想要有一个好的调试环境,就要涉及 SourceMap 的输出,而 Webpack 的 devtools 字段就是用于控制 SourceMap。

《基于 Webpack 搭建 Chrome 扩展开发环境》作者:不羁的风

Chrome扩展开发是目前比较火爆的领域,作为市场占有率第一的浏览器,有海量用户支撑。同时,Chrome扩展可以无缝对接Edge浏览器,不可不谓一箭双雕。
本文将介绍如何使用webpack构建一个支持Typescript的开发环境,在此基础上,实现一个可以修改网页背景的扩展应用。

《Webpack 源码 - Webpack 把 react 编译成 weapp》作者:perkz

在package.json中可以找到入口文件
这个文件的作用就是引入webpack核心函数(lib/webpack.js)以及工具文件,抛出整理好之后的webpack核心函数

《如何使用 Webpack 优化 moment.js》作者:记得要微笑

清洗moment语言环境文件
默认情况下,当您编写var moment = require('moment')代码并使用 webpack 打包时,捆绑文件的大小会变得很重,因为webpack 会捆绑所有Moment.js 所有语言环境文件(在 Moment.js 2.18.1 中,压缩后的 KB 为 160)。

《Wuzzle,进行基于 Webpack 的 JS 转译》作者:乌柏木

转译器(transpiler)是指能够进行文件到文件一对一转换的编译器(compiler)。在 JS 世界中,常见的开箱即可用的转译器有 typescript cli、babel cli 等,但他们一般只处理 .js、.ts 等脚本文件。而 webpack 尽管能通过配置处理各种文件,但他更关注如何打包 JS,做文件一对一转换相当麻烦。
为了解决这些局限,wuzzle 作为配置 webpack 编译的补充者,提供了基于 webpack 封装的 JS 转译命令 wuzzle transpile,以下是具体用法。

《前端构建效率优化之路》作者:chokcoco

我们知道,随着项目体量越来越大,我们在开发阶段将项目跑起来,也就是通过 npm run serve 的单次冷启动时间,以及在项目发布时候的 npm run build 的耗时都会越来越久。

因此,打包构建优化也是伴随项目的成长需要持续不断去做的事情。在早期,项目体量比较小的时,构建优化的效果可能还不太明显,而随着项目体量的增大,构建耗时逐渐增加,如何尽可能的降低构建时间,则显得越来越重要:

  1. 大项目通常是团队内多人协同开发,单次开发时的冷启动时间的降低,乘上人数及天数,经年累月节省下来的时间非常可观,能较大程度的提升开发效率、提升开发体验
  2. 大项目的发布构建的效率提升,能更好的保证项目发布、回滚等一系列操作的准确性、及时性

本文,就将详细介绍整个 WMS FE 项目,在随着项目体量不断增大的过程中,对整体的打包构建效率的优化之路。

《Webpack 拆包:关于 splitChunks 的几个重点属性解析》作者:deepfunc

为什么需要 splitChunks?

先来举个简单的栗子,wepack 设置中有 3 个入口文件:a.js、b.js 和 c.js,每个入口文件都同步 import 了 m1.js,不设置 splitChunks,配置下 webpack-bundle-analyzer 插件用来查看输出文件的内容,打包输出是这样的:(跳转见文章)

从分析图中可以比较直观的看出,三个输出 bundle 文件中都包含了 m1.js 文件,这说明有重复的模块代码。splitChunks 的目的就是用来把重复的模块代码分离到单独的文件,以异步加载的方式来节省输出文件的体积。splitChunks 的配置项很多而且感觉官方文档的一些描述不是很清楚,下面通过一些重点配置属性和场景解释来帮助大家理解和弄懂如何配置 splitChunks。为方便理解和简单演示,webpack 和 splitChunks 的初始设置如下...

问题推荐

Unanswered:

Most frequent:


# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列,一周一主题。

每周二更新,欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

如有问题可以添加小姐姐微信~

image.png


SegmentFault_社区周刊
主题技术周刊,每周分享新鲜有趣的技术干货。
avatar头饰
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑 。

828 声望
2.1k 粉丝
0 条评论
推荐阅读
SegmentFault 思否技术周刊 Vol.79 — 如何优雅的使用 Go?
Go 是 Google 开发的一种静态强类型、编译型、并发型,并具有垃圾回收功能的编程语言。本期技术周刊一起了解 Go,欢迎大家阅读 ~文章推荐Golang 如何优雅接入多个远程配置中心? // 王中阳Goviper是适用于go应用...

Beverly1阅读 453评论 1

封面图
SegmentFault 思否技术周刊 Vol.76 — 破解 Javascript 玩法
维基百科:在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),是在支持头等函数的编程语言中实现词法绑定的一种技术。MDN: 闭包(closure)是一个函数以...

Beverly4阅读 1.1k

封面图
SegmentFault 思否技术周刊 Vol.68 — JavaScript 有哪些高阶玩法?
JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。一般来说,完整的 JavaScript 包括以下几个部分:ECMAScript,描述了该语言的语法和基本对象文档对...

Beverly3阅读 1k

封面图
SegmentFault 思否技术周刊 Vol.78 — Git 必看技术补给
Git 的诞生是一个非常有趣的故事。1991年 Linus 开源了 Linux 内核,无数 Linux 爱好者在世界各地为 Linux 编写代码,那么问题来了,这些代码该如何管理呢?起初 Linus 使用 BitKeeper(BitMover 公司的版本控制软...

Beverly3阅读 1.3k

封面图
SegmentFault 思否技术周刊 Vol.70 — 深入 MySQL 实战
MySQL 软件采用了 GPL( GNU 通用公共许可证),由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了 MySQL 作为网站数据库。

Beverly2阅读 1.5k

封面图
SegmentFault 思否技术周刊 Vol.73 — 如何有效地学习 JavaScript ?
在前端开发的过程中,开发者经常会用到 new Date() 来获取当前时间,但是 new Date() 是获取的当前操作系统的时间,由于用户可以修改当前电脑时间,所以它是不准确的。大部分情况下,用户修改当前电脑时间都没有...

Beverly3阅读 1.4k

封面图
SegmentFault 思否技术周刊 Vol.75 — 简简单单画个“图”
很多时候,在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事,因为之前并没有直接的方法,只能通过直线和圆弧间接组合而成,下面是一个常规绘制方式 {代码...} 这里x、y、w、h、r分别代表x坐标、y坐标、宽度、高...

Beverly1阅读 1.1k

封面图
avatar头饰
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑 。

828 声望
2.1k 粉丝
宣传栏