多入口

为什么要有多入口

这样你就可以在 vendor.js 中存入未做修改的必要 library 或文件（例如 Bootstrap, jQuery, 图片等），然后将它们打包在一起成为单独的 chunk。内容哈希保持不变，这使浏览器可以独立地缓存它们，从而减少了加载时间。在webpack的文档中有这样的一句话，我们配置多入口（这里vendor.js就是第二个入口），那么我们可以在这里面配置一些不常做修改的内容，来引入一些资源文件等等，或者一些附加的逻辑等。这样在这个文件中的内容很多情况下就不会更新hash值了，浏览器可以不用去重新请求这个文件。

所以在优化的时候，我们可以根据逻辑的更新频率等，把一些逻辑拆分出来。

多入口打包（bundle - 捆、束）

什么是多入口打包？我们有些时候打包，将所有的js资源全部打包到一个bundle中，然后在index.html中引入，然后从index.js开始执行所有的文件。但是我们有些情况，我们要把一些js文件分开引入，分开执行一些逻辑，当然根据场景来看。比较多的情况下是我们会让webpack打包出多个html文件，作为多个入口来进入到一个网页。这种情况下，我们会使用到一个插件HtmlWebpackPlugin，下面会说到。

现在我们要进行多入口打包输出成多个js文件，然后引入到index.html中。首先我们创建了一个print.js的文件，然后为了让webpack进行多个入口打包，我们还需要对webpack进行一些配置。

|---dist
    |--- index.html
    |--- main.js
|---src
    |--- index.js
+   |--- print.js
|--- package.json
|--- webpack.config.js

在print.js中简单暴露出一个函数，输出一句话。

print.js

export function printText() {
  console.log("print!");
}

警告

这里我们设置多个入口文件之后，我们要将output设置成多个输出文件，否则就会报错 Multiple chunks emit assets to the same filename [path].bundle.js。我们通过[name]来对entry的多个文件进行处理，如下。

配置多个entry，我们要把entry改为一个对象，通过key-value的形式来设置多个entry。配置完多个入口之后，我们要配置输出。我们可以通过[name]来拿到入口。这个filename除了使用[name]，还可以使用[contenthash]来获取文件的hash标识，除此之外还可以提供一个函数，其中包含一个参数可以拿到一些信息，具体需要看webpack-output-filename

webpack.config.js

const path = require("path");

module.exports = {
-  entry: "./src/index.js",
+  entry: {
+    index: "./src/index.js",
+    print: "./src/print.js",
+  },
  output: {
-    filename: "index.js",
+    filename: "[name].bundle.js",
//  filename: "[name].[contenthash].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

这样，我们配置好了多入口和多输出的配置，这样看来我们的输出应该是有index.bundle.js和print.bundle.js这2个文件。经过打包后发现确实成功在dist目录下生成了这2个文件，但是我们之前打包的文件index.js仍然还存在，而且我们发现如果有越来越多的模块，那么index.html就需要一个一个引入，还要考虑引入顺序问题，所以在下面的内容我们就要解决自动对之前打包的内容进行清理以及自动构建html文件。

为什么要有多入口​

多入口打包（bundle - 捆、束）​

为什么要有多入口

多入口打包（bundle - 捆、束）