javascript - 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将自动注入(inject)<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 “知道”您的 Assets bundle.js映射到 bundle.some-hash.js因为它使用了 Webpack 的 Manifest .虽然没有发出这个 list 。它只是 Webpack 用来跟踪所有模块如何映射到输出包的数据。

WebpackManifestPlugin使用 Webpack 的 list 数据数据来发出 JSON 文件(你可以调用 manifest.json 或任何你想要的)。

由于您使用 HtmlWebpackPlugin 和 inject: true选项(这是默认选项)，HtmlWebpackPlugin 注入(inject)你的包 bundle.some-hash.js进入您的模板。所以你可能不需要为你的应用程序使用 WebpackManifestPlugin。

如果你没有使用 HtmlWebpackPlugin，或者你使用了 inject: false ，那么您需要找到一种方法来“手动”注入(inject) Webpack 生成的 Assets 。

所以，manifest.json不适用于 Webpack。这是给你的。

例如，假设您有一个 Python Flask Web 应用程序和您的网页是使用 Jinja 构建的模板。您可以使用 Webpack 生成所有静态 Assets ，并使用 manifest.json解析 Webpack 生成的 Assets 。 This Flask extension就是这样做的。这意味着在你的 jinja 模板中你可以这样写:

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

得到这个:

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

另一个用例是，如果您想要更好地控制将捆绑包注入(inject)模板的位置。为此，请查看 this example在 html-webpack-plugin 存储库中。