Webpack高级学习：优化代码运行性能-Code Split-代码分割-多入口

打包代码时会将所有 js 文件打包到一个文件中，体积太大了。如果只要渲染首页，就希望只加载首页的 js 文件，其他文件不应该加载。

所以将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。

使用代码分割（Code Split）可以解决这个问题

1. 分割文件：将打包生成的文件进行分割，生成多个 js 文件。

2. 按需加载：需要哪个文件就加载哪个文件。

创建新文件，多入口文件，使用对象表示

配置文件里面的内容

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 单入口
  // entry: './src/main.js',
  // 多入口
  entry: {
    main: "./src/main.js",//使用对象表示
    app: "./src/app.js",
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    // [name]是webpack命名规则，使用chunk的name作为输出的文件名。
    // 什么是chunk？打包的资源就是chunk，输出出去叫bundle。入口文件
    // chunk的name是啥呢？ 比如： entry中xxx: "./src/xxx.js", name就是xxx。注意是前面的xxx，和文件名无关。
    // 为什么需要这样命名呢？如果还是之前写法main.js，那么打包生成两个js文件都会叫做main.js会发生覆盖。(实际上会直接报错的)
    filename: "js/[name].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",//使用这个模块创建新文件
    }),
  ],
  mode: "production",
};

安装包-先初始化

 npm init -y

npm i webpack webpack-cli html-webpack-plugin -D

多入口文件会生成多个文件

运行

 npx webpack

输出了多个文件，配置了几个入口，至少输出几个 js 文件。

---