一文搞懂 Webpack 多入口配置

点击上方“前端公虾米”关注,探索前端新大陆

最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由、组件、资源等有重叠部分,也有各自不同的部分。由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来解决这个需求。

再一次,在网上找的不少文章都不合我的需求,很多文章都是只简单介绍了生产环境下配置,没有介绍开发环境下的配置,有的也没有将多入口结合 、 、 等进行配置,因此在下通过不断探坑,然后将思路和配置过程记录下来,留给自己作为笔记,同时也分享给大家,希望可以帮助到有同样需求的同学们~

1. 目标分析

一个项目中保存了多个 HTML 模版,不同的模版有不同的入口,并且有各自的 router、store 等;

不仅可以打包出不同 HTML,而且开发的时候也可以顺利进行调试;

不同入口的文件可以引用同一份组件、图片等资源,也可以引用不同的资源;

代码仓库:multi-entry-vue

示意图如下:

2. 准备工作

首先我们 使用 创建一个 webpack 模版的项。文件结构如下:

这里顺便介绍在不同系统下生成目录树的方法:

mac 系统命令行生成目录树的方法 ,这个命令的意思是,不显示 路径的文件,并且以文件夹在前的排序方式生成目录树。如果报没有找到 tree 命令的错,安装 tree 命令行 即可。

windows 系统在目标目录下使用 即可把当前目录树生成到一个新文件 中。

首先我们简单介绍一下 Webpack 的相关配置项,这些配置项根据使用的 Webpack 模版不同,一般存放在 或 中:

这个配置的意思是,进行 Webpack 后,会在命令的执行目录下新建 目录(如果需要的话),并将打包 目录下的 和它的依赖,生成 放在 目录中。

下面稍微解释一下相关配置项:

entry:入口文件配置项,可以为字符串、对象、数组。以上面的对象形式为例, 是入口名称,如果 中有 的话,就会被替换成 。

context:是 webpack 编译时的基础目录,用于解析 选项的基础目录(绝对路径), 入口起点会相对于此目录查找,相当于公共目录,下面所有的目录都在这个公共目录下面。

output:出口文件的配置项。

output/path:打包文件输出的目录,比如上面的 ,那么就会将输出的文件放在当前目录同级目录的 文件夹下,没有这个文件夹就新建一个。可以配置为 (md 语法不方便改成模板字符串,请自行修改)方便做持续集成。

output.filename:输出的文件名称, 的意为根据入口文件的名称,打包成相同的名称,有几个入口,就可以打包出几个文件。比如入口的 为 ,打包出来就是 ,入口是 ,打包出来就是 。

output.publicPath:静态资源的公共路径,可以记住这个公式: 。举个例子, 配置为 ,图片的 配置项为 ,那么最终打包出来文件中图片的引用路径为 。

本文由于是入口和出口相关的配置,所以内容主要围绕着 、 和一个重要的 webpack 插件 html-webpack-plugin,这个插件是跟打包出来的 HTML 文件密切相关,主要有下面几个作用:

根据模版生成 HTML 文件;

给生成的 HTML 文件引入外部资源比如 、 等;

改变每次引入的外部文件的 Hash,防止 HTML 引用缓存中的过时资源;

下面我们从头一步步配置一个多入口项目。

3. 开始配置

3.1 文件结构改动

在 目录下将 和 两个文件各复制一下,作为不同入口,文件结构变为:

3.2 简单配置

要想从不同入口,打包出不同 HTML,我们可以改变一下 和 两个配置,

根据上面一小节我们知道,webpack 配置里的 如果有 意为根据入口文件的名称,打包成对应名称的 JS 文件,那么现在我们是可以根据两个入口打包出 和 。

打包的结果如下:

当前代码:Github - multi-entry-vue1

如上图,此时我们 打包出一个引用了这两个文件的 ,那么如何打包出不同 HTML 文件,分别应用不同入口 JS 文件呢,此时我们需要借助于 这个插件。

这个插件, 一个,就打包一个 HTML 页面,所以我们在 配置里 两个,就能打包出两个页面来。

3.3 打包出不同的 HTML 页面

我们把配置文件改成下面这样:

上面一个配置要注意的是 ,如果没有配置,那么生成的 HTML 会引入所有入口 JS 文件,在上面的例子就是,生成的两个 HTML 文件都会引入 和 ,所以要使用 配置来指定生成的 HTML 文件应该引入哪个 JS 文件。配置了 之后,才能达到不同的 HTML 只引入对应 的 JS 文件的目的。

大家可以看到除了我们打包生成的 文件 和 之外,还有 和 这两个,这里稍微解释一下这两个 :

是指提取涉及 中的公共模块;

是对 模块做的缓存;

打包完的结果如下:

文件结构:

现在打包出来的样式正是我们所需要的,此时我们在 目录下启动 (如果你没安装的话可以先安装 ),就可以看到效果出来了:

当前代码:Github - multi-entry-vue2

至此就实现了一个简单的多入口项目的配置。

4. 配置改进

4.1 文件结构改动

我们在前文进行了多入口的配置,要想新建一个新的入口,就复制多个文件,再手动改一下对应配置。

但是如果不同的 HTML 文件下不同的 、 都放到 目录下,多个入口的内容平铺在一起,项目目录会变得凌乱不清晰,因此在下将多入口相关的文件放到一个单独的文件夹中,以后如果有多入口的内容,就到这个文件夹中处理。

下面我们进行文件结构的改造:

首先我们在根目录创建一个 文件夹,把不同入口的 、 、 都放这里,每个入口相关单独放在一个文件夹;

在 目录下建立一个 文件夹,用来存放多入口共用的组件等;

现在的目录结构:

4.2 webpack 配置

然后我们在 文件中加两个函数,分别用来生成 webpack 的 配置和 插件配置,由于要使用 来读取文件夹结构,因此需要引入 、 等模块:

稍微解释一下这两个函数:

函数从文件夹中找到二级目录下的 JS 文件作为入口文件,并且将二级目录的文件夹名作为,生成这样一个对象:,多个入口情况下会有更多键值对;

函数和之前函数的原理类似,不过组装的是插件的配置,生成这样一个数组,可以看到和我们手动设置的配置基本一样,只不过现在是根据文件夹结构来生成的:

有了这两个根据 文件夹的结构来自动生成 webpack 配置的函数,下面来改一下 webpack 相关的几个配置文件:

现在我们再 ,看看生成的目录是什么样的:

此时我们在 目录下启动 看看是什么效果:

当前代码:Github - multi-entry-vue3

网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

| 中秋佳节 |

—最后祝大家中秋快乐 —

看完三件事

如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-

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

扫码关注云+社区

领取腾讯云代金券