Webpack 进阶用法 1：多入口构建、资源内联、脚本分离

2024-02-17 17:57:09

前言

在上一篇文章中，我们介绍了 webpack 的基本原理和使用方式。如果你还没有阅读过那篇文章，我强烈建议你先去读一下，这样你才能更好地理解本文的内容。

多入口构建

在大多数情况下，我们的项目只有一个入口文件，也就是 main.js。但是，在一些场景下，我们可能需要多个入口文件。例如，我们的项目可能包含多个页面，每个页面都有自己的入口文件。

为了实现多入口构建，我们需要在 webpack 配置文件的 entry 字段中指定多个入口文件。entry 字段的值可以是一个字符串、一个数组或一个对象。

字符串

entry: './src/main.js'

数组

entry: [
  './src/main.js',
  './src/page1.js',
  './src/page2.js'
]

对象

entry: {
  main: './src/main.js',
  page1: './src/page1.js',
  page2: './src/page2.js'
}

当 entry 字段的值是一个字符串或数组时，webpack 会自动创建一个入口 HTML 文件，并将这些入口文件添加到 HTML 文件中。如果 entry 字段的值是一个对象，则我们需要手动创建入口 HTML 文件，并将这些入口文件添加到 HTML 文件中。

动态构建 entry

在某些情况下，我们可能需要动态构建 entry。例如，我们的项目可能包含一个目录，其中包含多个 JavaScript 文件，每个文件都对应一个页面。我们需要根据目录中的文件动态生成 entry。

为了实现动态构建 entry，我们可以使用 webpack 的 glob 插件。glob 插件允许我们使用通配符来匹配文件。

const glob = require('glob');

module.exports = {
  entry: glob.sync('./src/pages/*.js'),
  ...
};

上面的代码会将 src/pages 目录中的所有 .js 文件作为入口文件。

创建多入口 HTML 模板文件

当 entry 字段的值是一个对象时，我们需要手动创建入口 HTML 文件。我们可以使用 webpack 的 html-webpack-plugin 插件来创建入口 HTML 文件。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/main.js',
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      template: './src/page1.html',
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      template: './src/page2.html',
      chunks: ['page2']
    })
  ],
  ...
};

上面的代码会创建三个入口 HTML 文件：index.html、page1.html 和 page2.html。index.html 文件包含 main 入口文件，page1.html 文件包含 page1 入口文件，page2.html 文件包含 page2 入口文件。

资源内联

在某些情况下，我们可能需要将一些资源内联到 HTML 文件中。例如，我们可能需要将一些 CSS 文件或 JavaScript 文件内联到 HTML 文件中。

为了实现资源内联，我们可以使用 webpack 的 extract-text-webpack-plugin 插件。extract-text-webpack-plugin 插件允许我们将 CSS 文件或 JavaScript 文件提取到单独的文件中，也可以将这些文件内联到 HTML 文件中。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  plugins: [
    new ExtractTextPlugin({
      filename: 'style.css'
    })
  ],
  ...
};

上面的代码会将 main.js 文件中的所有 CSS 代码提取到 style.css 文件中。

<html>
  <head>
    <style>
      /* CSS 代码 */
    </style>
  </head>
  <body>
    <!-- HTML 代码 -->
  </body>
</html>

上面的代码将 style.css 文件中的 CSS 代码内联到 HTML 文件中。

脚本分离

在某些情况下，我们可能需要将脚本文件分离成多个文件。例如，我们可能需要将公共脚本文件和页面脚本文件分离成两个文件。

为了实现脚本分离，我们可以使用 webpack 的 split-chunks 插件。split-chunks 插件允许我们将脚本文件分离成多个文件。

const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  plugins: [
    new webpack.optimize.SplitChunksPlugin({
      chunks: 'all'
    })
  ],
  ...
};

上面的代码会将 main.js 文件中的脚本代码分离成两个文件：vendor.js 和 main.js。vendor.js 文件包含公共脚本代码，main.js 文件包含页面脚本代码。