webpack 配置多页面打包遇到的坑及解决

在前端开发中，webpack 已经成为一个重要的构建工具，可以帮助我们实现资源的打包、压缩、混淆等功能。但是，当我们需要将多个页面打包成多个 HTML 文件时，却很容易遇到一些坑。本文将介绍一些常见的问题，并给出解决方法及示例代码。

1. 多页面入口配置

在 webpack 中，我们需要将每个页面的入口都定义好。对于单页面应用，入口只有一个，如下所示：

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

对于多页面应用，有两种方式来定义入口。一种是手动指定每个页面的入口：

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

另一种方式是使用 glob 导入所有入口：

const glob = require('glob');

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

第一种方式比较简单，但是当项目中新建了一个页面时，需要手动更新 webpack 的配置文件，比较麻烦。第二种方式则会自动扫描所有页面，但是需要安装 glob 库，并且比较容易出现一些奇怪的问题。

2. 输出配置

对于多页面应用，我们需要将每个页面的打包结果输出到不同的 HTML 文件中。通常我们使用 html-webpack-plugin 生成 HTML 文件，并将打包结果注入到该 HTML 文件中。

使用 html-webpack-plugin 时，我们需要为每个页面都配置一个 HtmlWebpackPlugin 实例，并将它们添加到 webpack 的 plugins 中。以下是一个简单的示例：

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

需要注意的是，HtmlWebpackPlugin 默认会将所有入口的打包结果都注入到 HTML 文件中。因此，我们需要手动指定每个 HTML 文件需要注入的入口模块。

3. CSS 文件的提取和压缩

在多页面应用中，我们通常会将每个页面的 CSS 文件单独打包成独立的文件。这样可以避免多个页面使用同一个 CSS 文件会带来的样式冲突问题，并且可以利用浏览器的缓存机制提高页面加载速度。

对于 CSS 文件的提取，我们可以使用 mini-css-extract-plugin 插件，将 CSS 文件从打包结果中提取出来，并输出到单独的文件中。以下是一个示例配置：

// www.javascriptcn.com code example
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
    // ...
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash:8].css'
    }),
    // ...
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  // ...
}

对于 CSS 文件的压缩，我们可以使用 optimize-css-assets-webpack-plugin 插件，将 CSS 文件进行压缩。以下是一个示例配置：

// www.javascriptcn.com code example
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  // ...
}

4. 静态资源的路径问题

在多页面应用中，我们通常需要引入一些静态资源，如图片、字体、样式文件等。这些资源需要在打包时正确地处理路径，否则在不同页面之间会出现路径错误的问题。

webpack 默认会将所有静态资源当做模块来处理，并根据 import 语句中的路径映射到相应的文件。因此，在多页面应用中，我们需要在不同的页面中使用不同的路径来引入静态资源。

对于这个问题，最简单的解决方法是使用 copy-webpack-plugin 插件，直接将静态资源复制到打包后的目录中。以下是一个示例配置：

// www.javascriptcn.com code example
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin([
      {
        from: './src/static/',
        to: 'static/'
      }
    ])
  ],
  // ...
}

以上是我在实际项目中遇到的一些问题及解决方法，希望对大家有所帮助。多页面应用的配置相对复杂，需要根据项目的实际情况进行调整和优化。建议大家多多学习 webpack 相关知识，提高自己的前端开发能力。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d63ef9a941bf7134bf1018