本期技术周刊一起理解 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 的耗时都会越来越久。
因而，打包构建优化也是随同我的项目的成长须要继续一直去做的事件。在晚期，我的项目体量比拟小的时，构建优化的成果可能还不太显著，而随着我的项目体量的增大，构建耗时逐步减少，如何尽可能的升高构建工夫，则显得越来越重要：
- 大我的项目通常是团队内多人协同开发，单次开发时的冷启动工夫的升高，乘上人数及天数，经久不息节省下来的工夫十分可观，能较大水平的晋升开发效率、晋升开发体验
- 大我的项目的公布构建的效率晋升，能更好的保障我的项目公布、回滚等一系列操作的准确性、及时性
本文，就将具体介绍整个 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 技术周刊 #
「技术周刊」是社区特地推出的技术内容系列，一周一主题。
每周二更新，欢送「关注」。大家也能够在评论处留言本人感兴趣的主题，举荐主题相干的优良文章。
如有问题能够增加小姐姐微信~