Not inject to html

[HASSANDL]

Hello. I set inject true in config and all icons created but not inject to html file. I use html-webpack-plugin 4.0.0-beta.5 and add this plugin after html-webpack-plugin.

[brunocodutra]

Hi, html-webpack-plugin v4 is not supported yet. If you're interested I can look into releasing a beta version of webapp-webpack-plugin v3 with experimental support for it so we can try it out in preparation for the stable release.

[brunocodutra]

See #187

[HASSANDL]

Very thanks. I update to 3.0.0-beta.1 but not working.

[brunocodutra]

Thanks for trying it out! Could you share more details? What is not working?

[HASSANDL]

I use create-react-app & @craco/craco plugin.

/* craco.config.js */
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const {DefinePlugin, ProvidePlugin} = require('webpack');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;

const pwaManifest = require('./public/manifest');
const appConfig = require('./app.config');

module.exports = {
    webpack: {
        configure(webpackConfig, {env, paths}) {
            const proMode = env === 'production';

            // pwa manifest & icon generator
            webpackConfig.plugins.push(
                new WebappWebpackPlugin({
                    logo: path.resolve('src/assets/images/icon.png'),
                    prefix: 'static/media/icons',
                    inject: 'force',
                    favicons: {
                        appName: pwaManifest.name || '',
                        appShortName: pwaManifest.short_name,
                        appDescription: pwaManifest.description,
                        developerName: null,
                        developerURL: null,
                        background: pwaManifest.background_color,
                        theme_color: pwaManifest.theme_color,
                        orientation: pwaManifest.orientation,
                        display: pwaManifest.display,
                        logging: !proMode,
                        icons: {
                            coast: false,
                            firefox: false,
                            yandex: false,
                        },
                    }
                })
            );

            // production mode
            if (proMode) {
                // disable source mapping
                webpackConfig.devtool = 'eval';

                // minify css
                webpackConfig.plugins.push(
                    new OptimizeCSSAssetsPlugin({})
                );

                // compress images
                webpackConfig.plugins.push(
                    new ImageminPlugin({
                        pngquant: {
                            quality: '80',
                        },
                    })
                );

                // gzip compression
                webpackConfig.plugins.push(
                    new CompressionPlugin({
                        test: /\.*$/,
                        filename: '[path].gz[query]',
                        algorithm: 'gzip',
                        deleteOriginalAssets: false,
                        compressionOptions: {
                            level: 9,
                        },
                        // Only assets bigger than this size are processed. In bytes.
                        threshold: 10 * 1024,
                        // Only assets that compress better than this ratio are processed
                        // (minRatio = Compressed Size / Original Size).
                        minRatio: 0.8,
                    })
                );
            }

            return webpackConfig;
        },
    },
};

[brunocodutra]

Thanks, it seems you might have forgotten to the html-webpack-plugin the the Webpack plugins array? Notice that webapp-webpack-plugin does not generate html files by itself.

[HASSANDL]

create-react-app use html-webpack-plugin and I add console.log(webpackConfig.plugins) before add plugin and display:

[ HtmlWebpackPlugin {
    options:
     { template: '/projects/public/index.html',
       templateContent: false,
       templateParameters: [Function: templateParametersGenerator],
       filename: 'index.html',
       hash: false,
       inject: true,
       compile: true,
       favicon: false,
       minify: undefined,
       cache: true,
       showErrors: true,
       chunks: 'all',
       excludeChunks: [],
       chunksSortMode: 'auto',
       meta: {},
       title: 'Webpack App',
       xhtml: false },
    childCompilerHash: undefined,
    childCompilationOutputName: undefined,
    assetJson: undefined,
    hash: undefined,
    version: 4 }
]

[brunocodutra]

I see, is your project available for me to clone?

[brunocodutra]

Also, I see you set cache: true for the HtmlWebpackPlugin, is it possible that you didn't clean the cache before trying WebappWebpackPlugin v3?

[HASSANDL]

set cache to false but not working. I sent project to gmail.

[HASSANDL]

below hook not fire.

await HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapPromise('WebappWebpackPlugin', async htmlPluginData => {
            if (this.options.inject(htmlPluginData.plugin)) {
              htmlPluginData.plugin.options.inject = true;
              [].push.apply(
                htmlPluginData.assetTags.meta,
                tags.map(tag => parse5.parseFragment(tag).childNodes[0]).map(({ tagName, attrs }) => ({
                  tagName,
                  voidTag: true,
                  attributes: attrs.reduce((obj, { name, value }) => Object.assign(obj, { [name]: value }), {}),
                })),
              );
            }
            return htmlPluginData;
          });

[HASSANDL]

I found problem: I change index.js line 74, 75:

const HtmlWebpackPlugin = require('html-webpack-plugin');
await HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapPromise('WebappWebpackPlugin', async htmlPluginData => {

to:

const HtmlWebpackPlugin = compiler.options.plugins.find(
     (plugin) => plugin.constructor.name === 'HtmlWebpackPlugin'
);
await HtmlWebpackPlugin.constructor.getHooks(compilation).alterAssetTags.tapPromise('WebappWebpackPlugin', async htmlPluginData => {

[brunocodutra]

@HASSANDL I'm so sorry to keep you waiting.

Amazing job root causing this, to be frank I don't yet understand exactly what's going on, but this change still passes all unit-tests and does seem more logical than what I had before.

Stay tuned for the beta.2 release.

[HASSANDL]

Very thanks. I have tested and is ok.