Webpack 4 实战 React和Vue 项目

最近一直在参与小组内“造轮子”(具体内容另寻机会再详说)在开发的过程中,了解并且学习到 Webpack v4 的一些内容,趁记忆还深,汇总成文。

鉴于 Webpack 作为关键在 Google 可以搜索到很多相关的文章,网上文章也是针对各自项目和某些情况的具体方案或者介绍说明,本文也不例外,只介绍分享过程中积累的4.0版本的个人实战经验。

导读:本文你将 Get 到使用 Webpack 4 从零开始分别搭建 React 16 和 Vue 2 项目,同时还有基于 Webpack 4 的一些开发和生产环境配置经验,感兴趣同学可以继续阅读。

PS. 前半部分较为基础,有一定经验的同学可以直接跳过阅读后半部分实战内容。

正文开始

Webpack 4 从“零”开始

相信提到 Webpack 无论是作为前端工程师,还是 Web 开发者都不会太陌生,它从诞生伊始就收到社区的追捧和大量的生产实践,大量的项目代码构建工具开始选择他作为主力构建工具,究竟它是什么样工具,它的官网是这样描述的:

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.其核心就是现代 Javascript 应用的静态模块构建器。当在应用中运行 Webpack 的时候,它就会在内部构建依赖图来映射项目中的每一个所需要的模块,并生成一个或多个 bundle 文件。

也就是说 Webpack 可以分析项目中模块之间的依赖,并将最终的结果打包成 bundle 文件,开发者只要在开发过程中做到正确的引用和正常的代码开发即可,打包的事情统统交给 Webpack 即可。

在 Webpack 逐渐进化的过程中,或多或少存在一些缺点被社区人们所诟病,比如配置繁琐、构建时间较长且占用 CPU 高、文档不完整等等问题,并且衍生出一些替代品,但 Webpack 团队和开源社区的持续不断的贡献,它在不断完善和修正,如今已经进入v4.x.x 的时代。帮助开发者减少工作量是 4.0 的一个任务,从这个版本开始,Webpack几乎可以做到”零“配置或少配置地来构建项目生成 Bundle 文件,下面我们就先来看一下 的“零”。

首先,我们来创建一个 文件夹,做一些简单的初始化信息,并本地安装 ,此时项目中没有 webpack 配置文件。

修改 文件:

运行

过程中会提示是否安装 直接敲 即可。

此时控制台执行结果会有如下报错:

注意:我们目前没有写任何配置文件,但 Webpack 仍会提示没有找到 目录下 module。自 v4.0 开始已经 Webpack 可以自动在不配置 entry 的情况下自动检索项目文件夹中 src 目录下的 js 文件作为入口文件进行编译了。

接下来我们按照错误提示,在目录下创建 文件夹,并且新建一个文件 并且输入内容 ,再次运行 。

这时可以看到编译成功,项目目录下多出一个 文件夹,我们事先也并没有配置 输出指向, 默认将 bundle 好的内容,放在了 dist 文件夹内。

在执行成功的过程中,有一处警告提示:

回过头查看刚刚编译好的 文件,该文件已经直接被压缩好的,且可在生产模式下运行。

警告中提到的 就是 Webpack 4 新增的一个配置,具体内容可以见下面链接,以及笔者之前的翻译文章。

【原文】Webpack 4 mode and optimization

【译】Webpack 4 mode and optimization

当然,也可以通过 选项来手动选择 bundle 的模式,比如 。

自此,如果你的项目 src 目录下的内容需要 Webpack 帮你编译,输出在 dist 目录,Webpack 几乎零配置就可以直接“胜任”了。

Webpack 4.x & React 16.x

上一节简单介绍了 V4.x“零”配置的基础应用。当然,实际工作中我们的项目都会比较复杂,上面的内容远不能满足我们的需求,下面我们就以一个 DEMO 项目为例,还原从零开始搭建基于 打包编译项目的整个过程。

Facebook 官方推出的 工具已经非常好用,但仍然需要做一些修改才可以满足实际项目上线的需求,同时我们仍希望有更多所谓个性化设置来支持项目,且截至到今天 使用 webpack 3.8 与我们本文介绍 webpack 4 有出入,所以下面内容不再提及,对 感兴趣的同学也可以自行搜索查看了解。

React 项目初始化

首先,重复上面介绍的步骤:(创建目录、安装 react、安装 webpack、安装 babel)

现在我们新建一个配置文件, 代码:

在 目录下创建 :

在 下新建 内容如下:

执行 等待打包结果,此时目录 下已经打包好 bundle。

我们接着创建 html 文件,在 src 下创建 :

修改 build 的配置,拷贝 html

修改上面的 config:

执行 就可以看到已经打包好的 index.html 和 bundle js 。

进入开发阶段

dev-server

通过 搭建本地 server 服务,目前是通用的解决办法

安装依赖:

方便起见,我们在 的 scripts 中增加内容:

运行 此时会运行一个 dev-server 服务,这样我们就能方便地在本地进行开发了。

在开发中我们还有一些其他的需求,比如 、修改 dev-server 配置等,所以我们可以新建一个配置 :

修改 中 scripts 执行所需要执行的配置文件:

重新执行 可以看到修改配置后的 dev-server

热更新 HMR

配置热更新就可以让我们在开发过程中,将修改后代码整页面无刷新且保持原有 state 的情况下直接反应到页面,下面我们继续修改 config.dev.js 并在 App.jsx 增加内容:

执行 重新启动 server,每次修改代码后保存就可以看到控制台里重新编译的信息,浏览器中变化实际修改的内容了。

Webpack 4.x & Vue 2.x

Vue 官方也推出 vue-cli 来帮助使用者快速创建项目,同时也是使用 webpack 4 来进行构建项目,通过阅读使用文档和源码,需要满足现有复杂项目的需求,我们可能也是不仅需要使用 --options 的方式同时还需要做一些定制的开发才可以,因此下面不再提及。

Vue 项目初始化

与 React 项目初始化一致(创建目录、安装 vue、安装 webpack、安装 babel)

在 vue-webpack-demo 文件夹下,创建 :

新建 src 目录,并新建 app.js 和 app.vue 文件:

下面来增加配置文件, :

完成后执行 webpack 就可以看到 dist 下已经构建完成的项目。

注意:vue-loader 已经更新到 v15.x ,与之前 14.x 配置方式有差异。

用于开发 dev-server 配置与 React 基本一致,这里不重复。

实战内容经验积累

下面的内容是在笔者积累的项目优化实战经验汇总。

提取公共依赖

为了减少一次请求文件体积过大,同时修改业务代码时不必要重复重新下载公共依赖代码,我们通常将公共依赖模块如 、 、 、 等文件抽取出来独立打包。

注意: 在 4.0 中已经被 选项取代,不需要安装该插件就可以实现相同效果,见下面配置。

通过上面的配置,可以将公共依赖和业务代码隔离开来。但是,也会存在一些隐患

随着项目复杂度增加,依赖库增多, 的体积会越来越臃肿

多页面应用项目中,不同页面仍然会加载到在本页面根本无用的公共依赖的冗余代码

所以具体项目需要通过具体的需求来抽离出不同的 来分别引用,按需引用。

文件压缩

配置 Webpack 会使用默认插件 来进行压缩代码。

官网提到在 以前使用内置的 插件,在 Webpack 4 以后,开始使用 ^1.0.0 独立的版本。

注意:4.0 版本压缩的代码已经放在 下 节点下。备注:关于 选项,新版的 uglifyjs 已经支持多核 CPU 并行执行,所以已经不需要 插件。

proxy 接口代理

配合 dev-server 对代理本地启动的 server 某一域名进行代理,解决服务端接口暂时满足要求、本地请求跨域等问题。

文档见dev-server-proxy doc

支持多入口

虽然多数情况下,我们都在开发并且维护单页面的应用,但是当遇到需要多页面的时候,我们也希望在一个项目内进行构建,目前解决办法比较粗暴,当前有 n 个入口 html 就创建 n 个 插件实例。

预编译 sass、引入 postcss、处理 css 压缩 和 文件分离

这里要注意 rules 中 loader 数组的顺序,由于 webpack 执行 rules 是从最后一个开始倒叙执行,所以我们配置的顺序也是:

预编译 sass => 处理 postcss => 处理 css => 压缩并独立 css 文件

升级到 4.0,已经不再使用插件来进行文件抽取,改用 插件,配合 插件来压缩 css 文件。

支持 CDN 路径替换

可以将 html 中 css 和 js 的相对引用路径自动替换成配置的前缀路径,用来支持静态资源上线到具体指定的 CDN 路径来增加 app 内静态资源的下载速度。

生产环境的 source-map

有些时候我们会遇到在生产环境中代码出现问题的情况,而本地开发却不重现,这个时候 source-map 就成了辅助解决问题的一个有利的工具,具体见下面配置:

处理图片资源

下面是关键 但不会列出所有配置,内容略有差异,可以根据配置 limit 大小来控制图片转 base64 或压缩等。

文件无处理,直接拷贝

可以增加 base64 处理

处理 svg 文件,也同样支持 base64

图片文件降质压缩

其他插件

使用更稳定的 moudle id 生成方式

插件已经不需要单独配置,Webpack 4 已经默认在生产模式下打包时内置开启优化

小结

上面引用一句我们“造轮子”时使用的一句 slogan。

虽然 还没有达到开箱即用的程度(当然,开箱即用也就意味着可配置的内容有所减少,这一定是一把双刃剑),况且开箱即用也并不是它的被创造出来的初衷,简单的配置无法满足项目中的实际需求,各种各样的配置和插件配合着形成解决各种问题的不同方案,只在很多次尝试后才能达到针对某一个项目项目最优的配置。

然而,它只是一个工具,也许再过一段会有新的工具来取代 Webpack,But 既然你现在用到它,还是有必要花时间了解一下如何更好地让它为你、你的团队和你的项目来服务。

关于 Webpack 4 的配置经验笔者也在摸着石头过这条小河,网上也有诸多优化和解决方案,我们造的轮子也需要更多的项目和时间来帮助其成长,文中并没有面面俱到地将所有配置详细说明,或者并不是所有配置都是最优选择,也欢迎私信留言讨论。

如果你觉得这边文章对你有所帮助,请作者吃一个甜甜圈吧

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180612G0VGM000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券