Webpack 多页面打包配置

Webpack 多页面打包配置

前言

随着前端工程化的发展，Webpack 作为一个模块打包工具被广泛应用在前端开发中。在 React、Vue、Angular 等前端框架中，Webpack 都被作为默认的打包工具。但在多页面应用中，Webpack 的使用相对较少，甚至一些前端开发者认为只有单页面应用才需要使用 Webpack。但实际上，使用 Webpack 也可以对多页面应用进行打包优化，从而提高应用的性能和开发效率。

本文将介绍如何使用 Webpack 对多页面应用进行打包配置，以及一些打包优化的技巧和注意事项。

基础配置

入口配置

在多页面应用中，每个页面都有一个独立的入口文件。因此，在 Webpack 的配置中，需要对多个入口文件进行配置。

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
    ...
  },
}

出口配置

在多页面应用中，每个页面都对应着一个 HTML 文件。因此，在 Webpack 的配置中，需要对每个 HTML 文件进行打包配置。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
}

其中，[name] 会自动替换为入口文件对应的名称，[hash] 会自动生成一个哈希值，用于文件版本控制。

HTML 模板配置

在多页面应用中，每个 HTML 文件都需要对应着一个模板文件。可以使用 Webpack 插件 html-webpack-plugin 来自动生成 HTML 文件。

// javascriptcn.com 代码示例
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/page1.html',
      filename: 'page1.html',
      chunks: ['page1'],
    }),
    new HtmlWebpackPlugin({
      template: './src/page2.html',
      filename: 'page2.html',
      chunks: ['page2'],
    }),
    ...
  ],
}

其中，template 代表模板文件路径，filename 代表生成的 HTML 文件路径，chunks 代表当前 HTML 文件需要引入的入口文件。

打包优化

公共模块抽取

多个页面之间往往会有一些公共的模块，例如 jQuery、lodash 等常用库。为了减少重复打包这些公共模块，可以使用 Webpack 插件 CommonsChunkPlugin 进行公共模块抽取。

module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2,
    }),
  ],
}

其中，name 表示生成的公共模块名称，minChunks 表示至少需要被几个入口文件引用才会进行公共模块抽取。

CSS 文件抽取

在多页面应用中，每个 HTML 文件都会对应着一个 CSS 文件。可以使用 Webpack 插件 mini-css-extract-plugin 来抽取 CSS 文件。

// javascriptcn.com 代码示例
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
}

其中，MiniCssExtractPlugin.loader 会将 CSS 文件提取到独立的文件中，css-loader 和 postcss-loader 用于处理 CSS 文件的依赖关系和浏览器兼容性。

总结

通过以上的配置，我们可以针对多页面应用进行 Webpack 打包优化，从而提高应用的性能和开发效率。但需要注意的是，在实际的开发中，还需要根据具体的业务场景和要求进行适当的配置和调整。

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