-
Notifications
You must be signed in to change notification settings - Fork 107
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Need a woff2 format to be stored at bundle chunks #106
Comments
hi @roman-rr, I think this is something you should tackle via your webpack config. Did you research about this? |
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' }
],
}),
]
}); |
@roman-rr is this still an issue? |
Actually this is not a issue of 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.
// ...
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 |
@JanMalte Thank you for explanation, let me try at first. |
@JanMalte @fjsj {
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 For example I need to have inside of "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, Maybe I miss something important ? |
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?
@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 The output of this tag as it's written above is something like this:
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. |
@rvlb This is make sense, thank you. I will try. |
It seems |
@rvlb @fjsj With #106 (comment) this method I'm able to get bunch of all fonts using in all bundles. generator: {
filename: "fonts/[name]-[contenthash][ext]",
},
} But this will be messy, in case where we have different fonts in different bundles. What I requestCollect "chunks":{
"home":[
"e4e24724b5fcfe64adb9.woff2",
"home-f096b527166df6583ac8.bundle.js"
],
"article":[
"bce34k24b5fcfr34bdb5.woff2",
"bce35k24d5fsfrx4bdg5.woff2",
"article-40f6bc27366kf6d83sc2.bundle.js"
]
}
Does it possible ? |
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: 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. |
Yes, it'd be necessary for Webpack to either:
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. |
@rvlb Thank you very much. I will ask there, and will let you know in future. |
For example i have
I need
Is there a way to do this ? My fonts have changes time to time and name is dynamic. I need to get a relation bundle <-> fonts.
The text was updated successfully, but these errors were encountered: