1.问题描述

在 webpack 中，默认会将所有的 js 打成一个 包。

文章目录

假设在多页面工程中，那可能 index.html 只需要引入 index.js。

按照默认的做法，这样就加载了一些不必要的 js 代码，导致加载时间变长。

2.解决问题

我们可以使用 入口起点，来配置多个打包入口，这样就会生成多个 js 文件。

每个 入口 都会生成一个 js 文件。

我们需要修改：

  • entry：指定多个入口文件
  • output：由于是多个入口文件了，所以需要将名称写成动态的。
  • htmlWebpackPlugin：由 chunks 属性指定该 html 需要引入哪些包。

在 htmlWebpackPlugin 的 chunks 属性中，需要和 entry 对象中的 key 对应。

module.exports = {
    entry: {
        index: './src/js/index.js',
        about: './src/js/about.js',
    },
    output: {
        // 将名称改成动态的
        filename: 'static/js/[name].js',
        path: path.resolve(__dirname, '../dist'),
        clean: true,
    },
    // 需要在 htmlWebpackPlugin 中配置该 html 引入了哪些包
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html',
            inject: 'body',
            // 代表引入 static/js/index.js 这个包
            chunks: ['index'],
        }),
        new HtmlWebpackPlugin({
            filename: 'about.html',
            template: './src/pages/about.html',
            inject: 'body',
            // 代表引入 static/js/about.js 这个包
            chunks: ['about'],
        }),
    ]
};

3.弊端

假设在 index.js 和 about.js 文件中，都引入了 lodash 这个库。

// index.js | about.js
import _ from 'lodash';'

那么在进行打包时，这两个 js 文件都会将 lodash 的源代码引入进来，从而这两个 js 文件体积都提升。

所以我们需要将 lodash 提取成公共的模块。

4.提取公共模块

我们需要在 优化 配置项中添加该属性。

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
   },
};

这样就会生成 3 个 js 文件，分别是 index.js、about.js、lodash.js。

其中 index.html 和 about.html 都使用两个 script 标签来引入对应的 js 和 lodash.js 文件。