entry

entry 入口起点。

语法

---

单页面

const Path = require("path");

const Path = require('path');

module.exports = {
  entry:Path.resolve(__dirname,"src","index.js"),
}

多页面

const Path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    entry1: Path.resolve(__dirname, "src", "entry1.js"),
    entry2: Path.resolve(__dirname, "src", "entry2.js"),
  },
  output: {
    filename: "[name].js",
    path: Path.resolve(__dirname, "build"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      chunks: ["entry1"],
      filename: "index1.html",
      template: Path.resolve(__dirname, "index1.html"),
    }),
    new HtmlWebpackPlugin({
      chunks: ["entry2"],
      filename: "index2.html",
      template: Path.resolve(__dirname, "index2.html"),
    }),
  ],
};

分离 app(应用程序) 和 vendor(第三方库) 入口

vendor 可以在 vendor.js 中存入未做修改的必要 library 或文件（例如 Bootstrap, jQuery, 图片等），然后将它们打包在一起成为单独的 chunk。内容哈希保持不变，这使浏览器可以独立地缓存它们，从而减少了加载时间。

配置如下:

entry: {
  index: Path.resolve(process.cwd(), "./src/index.js"),
  vendor: ['lodash'],
},
output: {
  path: Path.resolve(process.cwd(), "./build"),
  filename: "[name].[chunkhash].js",
}

配置细节:

1. output.filename 中的文件名字:

   • 如果为[name].[hash].js: 那么 app 应用程序中的任何文件发生变化，整个项目的 hash 会重新生成，那么第三方库的缓存会失效，也会重新打包编译(我们希望的是 app 应用程序无论如何变化，不会影响第三方库的缓存)
   • 如果为[name].[chunkhash].js: app 的 chunk引用的模块 与 第三方库的 chunk引用的模块 互不影响，所以 app 应用程序的改变不会影响第三方库的缓存
   • 如果为[name].[contenthash].js: app 的 chunk模块内容 与 第三方库的 chunk模块内容 互不影响，所以 app 应用程序的改变不会影响第三方库的缓存

   综上所述: output.filename 最好为 [name].[chunkhash].js 或者 [name].[contenthash].js