Webpack 中 Webpack-Manifest-Plugin 的用途

Question

在官方文档中说在应用Code Splitting和生成chunk文件时，如果chunk代码改变，那么它的文件名就会改变。但是index.html，使用chunk代码文件的哪个不能更改其<script>标记中的文件名，因此在这种情况下manifest.json，由 生成的webpack-manifest-plugin将有助于映射[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什么？

Answer 1

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

WebpackManifestPlugin使用 Webpack 的清单数据数据来发出一个 JSON 文件（你可以调用它manifest.json或任何你想要的）。

由于您将 HtmlWebpackPlugin 与inject: true选项（这是默认选项）一起使用，HtmlWebpackPlugin 会将您的包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 存储库中的此示例。