HTML files output by HtmlWebpackPlugin are ignored

[rossjrw]

A file options.html, which is constructed by HtmlWebpackPlugin, does not appear in the ZIP despite appearing in the Webpack output.

If I copy the original HTML file using CopyWebpackPlugin, the file does end up in the ZIP file.

HTML file is not present in ZIP:

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/options.html",
      filename: "options.html"
    }),
    new CopyWebpackPlugin({
      patterns: [ ... ]
    }),
    ...
    new ZipWebpackPlugin({ filename: "s-css-p.zip" })
  ]
};

HTML file is present in ZIP (just as a proof-of-concept that the interaction with HtmlWebpackPlugin is the weak point - this is not a workaround):

module.exports = {
  ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [ { from: "./src/options.html", to: "options.html" } ]
    }),
    ...
    new ZipWebpackPlugin({ filename: "s-css-p.zip" })
  ]
};

Seems similar to #13, which was closed without a fix.

The only way I've found of creating a ZIP archive with everything I need is FileManagerPlugin (CompressionPlugin compresses files individually, but doesn't create a unified archive).

[irusanov]

Same for me, I've tried the include and exclude options to no avail. All javascript chunks and files copied from the CopyWebpackPlugin are included in the zip, but favicon.ico and index.html are not.

export default {
  entry: [
    'whatwg-fetch',
    '@babel/polyfill',
    './src/js/core.js'
  ],
  output: {
    path: outputPath,
    filename: '[name].[contenthash].js',
    assetModuleFilename: '[name].[contenthash][ext][query]'
  },
  ...
  plugins: [
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['dist']
    }),
    new CopyWebpackPlugin(
      {
        patterns: [
          { from: `${srcPath}/scss/*.css`, to: `${outputPath}/[name].[ext]`}
        ]
      }
    ),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      favicon: path.join(srcPath, 'favicon.ico'),
      pkg: pkg,
      template: path.join(srcPath, 'index.html')
    }),
    new ZipPlugin({
      filename: 'ZenTimingsSite.zip',
      fileOptions: {
        mtime: new Date(),
        mode: 0o100664,
        compress: true,
        forceZip64Format: false
      }
    })
  ]
};

[FoE-Info]

this was working OK in webpack 4. its broken since updating to webpack 5

[susemeee]

This might be html-webpack-plugin issue. Using beta version ([email protected]) the plugin includes index.html in zip file.

[tscislo]

Yes, updating to [email protected] solved this issue for me.

[markb-trustifi]

I have webpack 4. I don't use the html-webpack-plugin and the ZipWebpackPlugin doesn't copy the index.html to the archive. All ZipWebpackPlugin options are default. I think it is because all plugins run before the webpack builds the index.html file. The index.html is not among the compilation.assets. In addition, the filemanager-webpack-plugin cannot copy files from the built destination folder.