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：

• craco 配置 style-resources-loader问题？
• 为什么 webpack 配置别名后自动补全的路径错误导致找不到模块编译失败？
• webpack4使用react-loadable为什么不生效?

Most frequent：

• vue-ts-webpack搭建项目，编译报错是为什么？
• webpack3.6.0 构建 vue 项目怎么升级 vue-devServe？
• webpack5 打包报错 “import may appear only with 'sourceType: module' ”？
• webpack+node+ts打包后 is not a function问题?

---

# SegmentFault 技术周刊 #

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

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

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