jantimon / jantimon/iconfont-webpack-plugin

Usage with Webpack 5 Asset Modules

Open
#58 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
111
Forks
34
PR merge metrics
No merged PRs in 30d

Description

I can't get this working with Webpack 5's asset modules.

If I set `/\.svg$/` type to `asset/resource` it generates the font with a `module.exports=`. If i set it to `asset/inline` it set's the type SVG instead of WOFF.

This is my rule for my CSS
```
{
test: /\.scss$/,
use: [
{loader: MiniCssExtractPlugin.loader},
{loader: "css-loader", options: {sourceMap: mode !== "production"}},
{
loader: "postcss-loader",
options: {
sourceMap: mode !== "production",
postcssOptions: (loader) => {
return {
plugins: [
new IconfontWebpackPlugin({
resolve: loader.resolve,
})
]
};
}
}
},
{
loader: "sass-loader",
options: {
sourceMap: mode !== "production"
}
}
]
}

```

This is my rule for SVG
```
{
test: /\.svg$/,
use: [
{
loader: "svgo-loader"
}
],
type: "asset/resource"
}
```

This is my rule for all other assets (incl. WOFF)
```
{
test: /\.(woff(2)?|ttf|eot|jpg|png)(\?v=\d+\.\d+\.\d+)?$/,
type: "asset/resource"
},

```

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the Webpack rules and postcss-loader configuration shown in the issue, then inspect how the plugin resolves the generated SVG and WOFF assets under Webpack 5 asset modules. Reproduce the configuration with the supplied CSS, SVG, and font rules; done means the generated font loads with the expected WOFF asset type and no unwanted module.exports wrapper.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.