Webpack-Manifest-Plugin在Webpack中的作用是什么？

Question

在官方文档中提到当应用Code Splitting并生成chunk文件时，如果chunk代码发生更改，则其文件名将更改。然而使用chunk代码文件的index.html不能更改其<script>标签中的文件名，因此在这种情况下，由webpack-manifest-plugin生成的manifest.json将有助于将[name].js映射到[name].[hash].js。

但与文档所说相反，似乎每次运行webpack构建我的代码时，新代码都会生成具有新哈希值的文件（如果代码中的某些内容发生更改），并且HTML-Webpack-Plugin会自动注入带有代码文件的新名称的<script>标签。这似乎不需要使用webpack-manifest-plugin，我甚至看不到manifest.json的使用处。

如果您正在查找我的webpack.config.js：

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')

module.exports = {
  entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.jsx"],
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(`${__dirname}/build`)
  },
  mode: "none",
  optimization: {
    runtimeChunk: 'single',

    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: "/node_modules",
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: './public/index.html'
    }),
    new ManifestPlugin({
      fileName: 'manifest.json'
    })
    // need this plugin for SSR?
  ]
}

webpack-manifest-plugin和manifest.json的详细使用方法是什么？

- cadenzah

---

有很多情况下，你想要使用 webpack 构建的结果，但不能直接注入脚本标签，需要知道最终文件名。例如，我在 ASP.Net Core 中使用它来手动注入脚本标签。 - Karl-Johan Sjögren

Answer 1

HtmlWebpackPlugin“知道”您的资源包bundle.js映射到bundle.some-hash.js，因为它使用了Webpack的清单。虽然不会发出此清单，但它只是Webpack用来跟踪所有模块如何映射到输出包的数据。

WebpackManifestPlugin 使用Webpack的清单数据来发出JSON文件（您可以将其命名为manifest.json或其他任何名称）。

由于您正在使用带有inject：true选项的HtmlWebpackPlugin（它是默认选项），因此HtmlWebpackPlugin将您的Bundle bundle.some-hash.js 注入到您的模板中。因此，您可能无需为应用程序使用WebpackManifestPlugin。

如果您未使用HtmlWebpackPlugin或者如果您使用了inject:false，那么您需要找到一种方法来“手动”注入由Webpack生成的资产。

因此，manifest.json 不是为Webpack而创建的，而是为您而创建的。

假设您拥有一个Python Flask Web应用程序，并且您的网页是使用Jinja模板构建的。您可以使用Webpack生成所有静态资产，并使用manifest.json 解析Webpack生成的资产。这个Flask扩展程序就是这样做的。这意味着在您的jinja模板中，您可以编写以下内容：

<img src="{{ asset_for('images/hamburger.svg') }}" alt="Hamburger">

还有这个：

<img src="images/hamburger.d2cb0dda3e8313b990e8dcf5e25d2d0f.svg" alt="Hamburger">

另一个用例是，如果您想对注入到模板中的捆绑包进行精细控制。要做到这一点，请查看html-webpack-plugin存储库中的此示例。

- jackdbd

---

所以即使我不使用 WebpackManifestPlugin，当执行打包时，HTMLWebpackPlugin 也会在内部使用 manifest，而 WebpackManifestPlugin 则为开发者提供了 manifest.json，这样说对吗？ - cadenzah