在Webpack中动态生成PWA的manifest.json并导入外部值

不用自行开发完整的自定义插件或Loader，借助现有工具就能轻松实现需求，以下是几种实用方案：

1. 使用webpack-pwa-manifest插件（推荐） #

这是专门为Webpack打造的PWA Manifest生成工具，完全覆盖你的需求：

• 自动处理图标资源：指定图标源文件后，插件会将图标纳入构建流程，自动生成多尺寸适配图标，并在Manifest中填充正确的资源URL
• 读取外部配置：可直接引入package.json中的名称、描述、版本等字段
• 支持动态字段：允许通过函数生成动态值（比如根据环境切换start_url）

示例配置：

const WebpackPwaManifest = require('webpack-pwa-manifest');
const packageJson = require('./package.json');
const path = require('path');

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new WebpackPwaManifest({
      name: packageJson.name,
      short_name: packageJson.name,
      description: packageJson.description,
      background_color: '#ffffff',
      theme_color: '#4285f4',
      start_url: process.env.NODE_ENV === 'production' ? '/app' : '/',
      display: 'standalone',
      icons: [
        {
          src: path.resolve('src/assets/icon.png'),
          sizes: [96, 128, 192, 256, 384, 512],
          destination: 'assets/icons'
        }
      ]
    })
  ]
};

2. 自定义JS生成Manifest（高度灵活） #

如果需要更精细化的控制，可以通过JS文件动态生成Manifest内容，再让Webpack转成JSON输出：

1. 创建src/manifest.js，引入package.json和图标资源（让Webpack处理图标）：

// src/manifest.js
import packageJson from '../package.json';
import icon96 from './assets/icon-96x96.png';
import icon192 from './assets/icon-192x192.png';

export default {
  name: packageJson.name,
  short_name: packageJson.name,
  description: packageJson.description,
  version: packageJson.version,
  background_color: '#fff',
  theme_color: '#4285f4',
  start_url: '/',
  display: 'standalone',
  icons: [
    { src: icon96, sizes: '96x96', type: 'image/png' },
    { src: icon192, sizes: '192x192', type: 'image/png' }
  ]
};

2. 在Webpack配置中添加规则，将JS转成JSON文件：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /manifest\.js$/,
        use: [
          {
            loader: 'file-loader',
            options: { name: 'manifest.json' }
          },
          { loader: 'webpack-json-loader' }
        ]
      }
    ]
  }
};

3. 注入Manifest到HTML #

最后记得通过html-webpack-plugin将Manifest链接注入到HTML中，确保PWA能识别：

new HtmlWebpackPlugin({
  template: 'src/index.html',
  meta: {
    'theme-color': '#4285f4'
  },
  manifest: './manifest.json'
})

内容的提问来源于stack exchange，提问作者Ixonal