Need a woff2 format to be stored at bundle chunks about webpack-bundle-tracker

[fjsj]

hi @roman-rr, I think this is something you should tackle via your webpack config. Did you research about this?
Please share your config.

[roman-rr]

Hello @fjsj thank you for fast reply.

webpack.common.js

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const scripts_dir = '../assets/';

module.exports = {
  context: __dirname,
  entry: {
    'home': scripts_dir + 'home.bundle.js',
    'article': scripts_dir + 'article.bundle.js',
    'article-locked': scripts_dir + 'article-locked.bundle.js',
    'amp': scripts_dir + 'amp.bundle.js',
    'default': scripts_dir + 'default.bundle.js',
    'create-article': scripts_dir + 'create-article.bundle.js'
  },
  output: {
    path: path.resolve('./assets/dist/'),
    filename: "[name]-[hash].bundle.js",
    chunkFilename: "[name]-[hash].bundle.js"
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: 'jquery'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ],
      }
    ],
  }
}

webpack.prod.js

const glob = require('glob-all')
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgecssPlugin = require('purgecss-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]-[hash].bundle.css',
      chunkFilename: '[name]-[hash].bundle.css',
    }),
    // Two ways to make specific configs for specific entries: 
    // - wait official support
    // - make separated configurations
    new PurgecssPlugin({
      safelist: {
        greedy: [/^pswp/, /^cropper/]
      },
      paths: glob.sync([
        `./apps/**/*.html`, 
        `./assets/scripts/**/*.js`
      ])
    }),
    new ImageminPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: '../assets/images', to: '../dist/images' }
      ],
    }),
  ]
});

[JanMalte]

@roman-rr is this still an issue?

[roman-rr]

@JanMalte Yes, still need it. To preload fonts with rel as described here.

<link rel="preload" href="/assets/{{FONT_HASH_NAME}}.woff2" as="font" type="font/woff2" crossorigin>

[JanMalte]

Actually this is not a issue of webpack-bundle-tracker but just a config issue.

You would need to add a rule for your font files to enable iterating over all chunks and add them to your preload HTML tags.

webpack.common.js

// ...
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(woff2|ttf|eot)$/,
        type: "asset/resource",
        generator: {
            filename: "fonts/[contenthash][ext]",
        },
      }
    ],
  }
}

If you are using https://github.com/django-webpack/django-webpack-loader you could use the Advanced Usage to load only special file types in your preload section or write a customer template to load only chunks matching the fonts/.* pattern

[roman-rr]

@JanMalte Thank you for explanation, let me try at first.

[roman-rr]

@JanMalte @fjsj
Sorry for delay. But the issue still actual for me.
Just tried add some configuration, but the main point of this issue is the output of webpack-stats.json.
As you mentioned this part:

{
        test: /\.(woff2|ttf|eot)$/,
        type: "asset/resource",
        generator: {
            filename: "fonts/[contenthash][ext]",
        },
}

This is works to collect fonts into the folder, but it doesn't save font's to bundle by arrays in webpack-stats.json.

For example I need to have inside of webpack-stats.json:

"chunks":{
      "home":[
         "e4e24724b5fcfe64adb9.woff2",
         "vendors-node_modules_mini-css-extract-plugin_dist_hmr_hotModuleReplacement_js-node_modules_we-a0114e-f096b527166df6583ac8.bundle.js",
         "assets_custom-libs_semantic_parts_container_css-assets_custom-libs_semantic_parts_grid_css-as-b1ee4e.css",
         "home.css",
         "home-f096b527166df6583ac8.bundle.js"
      ]
}

But in fact, webpack-stats.json doesn't contains font files, especially woff2 inside of chunks object, and I'm unable to pick it in template with django-webpack-loader.

Maybe I miss something important ?
Once again, what I need is to have font files in chunks object to pick it by bundles.

[rvlb]

Hi @roman-rr, thanks for the follow-up. I've managed to reproduce this scenario on my end. My bet is that it won't include the font files in the chunks list because the general use-case is to have those fonts imported inside the JS or CSS chunks.

For your use case, could you test the following approach?

• Add the rule from #106 (comment) to tell Webpack how to process the font files
• Ensure that the font file is imported somewhere in your JS code (it doesn't need to be used by the code, just be imported)
  • This step is necessary to tell Bundle Tracker to include the font file on webpack-stats.json, although it will be included in the "assets" dictionary, not in the "chunks" one
  • It can be done by doing import FontFile from "<font/file/path.woff2>" in your index.js (or the file you're using as the entrypoint)
• In the backend code, create a template tag named something like get_font_assets and register it. The code should look like this:

@register.simple_tag
def get_font_assets(config='DEFAULT'):
    assets = get_loader(config).get_assets().get('assets')
    font_assets = []
    for asset_name, asset in assets.items():
        if asset_name.endswith((".ttf", ".woff2", ".eot")):
            font_assets.append(asset)
    return font_assets

And then in your template, you can use it by calling {% get_font_assets %} after loading it there.

The output of this tag as it's written above is something like this:

[{'name': 'fonts/font-name-hash.ttf', 'path': '/path/to/file/font-name-hash.ttf'}]

This way you can loop through these objects and use the paths in the template to load the fonts.

If you prefer, you can rewrite the template tag a bit to already return a list of the HTML tags (something like it's done on https://github.com/django-webpack/django-webpack-loader/blob/master/webpack_loader/utils.py#L59).

Please let me know if that works for your scenario.

[roman-rr]

@rvlb This is make sense, thank you. I will try.

[fjsj]

It seems get_as_tags could be expanded to work with fonts in general? Please feel free to open a PR with that improvement.

[roman-rr]

@rvlb @fjsj
Check once again and still unable to achieve clear solution with such way.

With #106 (comment) this method I'm able to get bunch of all fonts using in all bundles.
This is not a solution, because I need to preload only bundle font for page optimization, but not preload all font assets.
Of course, I can change font names in generator, and rename fonts to include appropriate bundle names.

generator: {
            filename: "fonts/[name]-[contenthash][ext]",
        },
}

But this will be messy, in case where we have different fonts in different bundles.

What I request

Collect woff2 files imported in entry points by chunks, e.g.

"chunks":{
      "home":[
         "e4e24724b5fcfe64adb9.woff2",
         "home-f096b527166df6583ac8.bundle.js"
      ],
      "article":[
         "bce34k24b5fcfr34bdb5.woff2",
         "bce35k24d5fsfrx4bdg5.woff2",
         "article-40f6bc27366kf6d83sc2.bundle.js"
      ]
}

Does it possible ?

[rvlb]

Hi @roman-rr, thanks for the comment.

Unfortunately that'd be a limitation from what we we receive from the Webpack compiler.

The files parsing on webpack-bundle-tracker is done in 2 steps:

• Assets parsing
• Chunks parsing

When we parse the assets the compiler sends to us, we don't have the information regarding which chunks those files were used (the parameters we get are the file object, with data such as content and size, and the filename).

When we parse the chunks, we get access to the file list for a given chunk, but it's limited to what the compiler provides us (namely the JS and CSS bundles), so we don't have access to the assets used there.

My thinking on this scenario is that the most common case here is to have each JS/CSS compiled file to handle the assets they use in each chunk, so that'd be why Webpack won't provide this complete file list for us.

[roman-rr]

@rvlb Is that a feature that I can try to request from webpack and address to their directly?

[rvlb]

Yes, it'd be necessary for Webpack to either:

1. Make this method return all assets files that are used in a given chunk, not only the JS and CSS files
2. or, make the compilation assets that we use here return the chunk(s) were each asset is used.

There may be some Webpack setting already in place that I'm not aware of that could already allow our package to get that info. If it exists, there might be a possibility that someone on the webpack repo would point to the right direction.

[roman-rr]

@rvlb Thank you very much. I will ask there, and will let you know in future.