Webpack 多页面应用如何打包-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Webpack 已经成为不可或缺的工具，尤其是在多页面应用开发中，Webpack 的作用更加显著。Webpack 可以将多个页面的打包逻辑集中在一起，同时实现代码的模块化、代码分割、按需加载等功能，从而提高页面性能和开发效率。

本文将详细介绍如何使用 Webpack 打包多页面应用，包括配置多个入口、生成多个 HTML 文件、使用公共代码和第三方库等。

配置多个入口

在单页面应用中，我们只需要配置一个入口即可，但是在多页面应用中，我们需要为每个页面配置一个入口。我们可以通过一个对象来配置多个入口，如下：

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
    page3: './src/page3.js'
  },
  // 其他配置...
}

上面的代码定义了三个入口：page1、page2 和 page3，他们分别对应了不同的 JS 文件。Webpack 将会根据这些入口文件进行打包。

生成多个 HTML 文件

在多页面应用中，我们需要为每个页面生成一个 HTML 文件，并将对应的 JS 文件引入。为了实现这个功能，我们可以使用 html-webpack-plugin 插件。

npm i html-webpack-plugin -D

下面是该插件的配置：

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
    page3: './src/page3.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'page1.html',
      template: './src/page1.html',
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: './src/page2.html',
      chunks: ['page2']
    }),
    new HtmlWebpackPlugin({
      filename: 'page3.html',
      template: './src/page3.html',
      chunks: ['page3']
    })
  ],
  // 其他配置...
}

上面代码中，我们使用了 HtmlWebpackPlugin 插件，并配置了三个 HTML 文件。filename 选项指定了输出的文件名，template 指定了 HTML 模板文件，chunks 指定了该页面需要引入哪些 JS 文件。

当我们运行打包命令时，Webpack 会根据这些配置自动生成 HTML 文件，例如 page1.html 文件中会自动引入 page1.js，而 page2.html 文件中则会自动引入 page2.js。

使用公共代码和第三方库

在多页面应用中，不同页面之间可能会存在公共的代码和第三方库，如果每个页面都单独打包，将会造成资源的浪费，因此我们需要将公共代码和第三方库进行提取和统一打包。

Webpack 提供了 CommonsChunkPlugin 插件来进行公共代码和第三方库的提取，我们只需要在配置中添加两个入口即可：

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
    page3: './src/page3.js',
    common: ['jquery', 'lodash'] // 添加两个入口
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 配置...
      chunks: ['page1', 'common'] // 添加公共代码
    }),
    new HtmlWebpackPlugin({
      // 配置...
      chunks: ['page2', 'common'] // 添加公共代码
    }),
    new HtmlWebpackPlugin({
      // 配置...
      chunks: ['page3', 'common'] // 添加公共代码
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common', // 公共代码的名称
      minChunks: function (module) {
        return module.context && module.context.indexOf('node_modules') !== -1
      } // 提取第三方库
    })
  ],
  // 其他配置...
}

上面的代码将 jquery 和 lodash 提取到了 common.js 中，而且只有当模块是来自于 node_modules 时才进行提取。

总结

本文介绍了如何使用 Webpack 打包多页面应用，包括配置多个入口、生成多个 HTML 文件、使用公共代码和第三方库等。以上内容只是入门级别的介绍，Webpack 还有更多高级特性等待大家去探索。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654710bb7d4982a6eb172ce3