hard-source-webpack-plugin icon indicating copy to clipboard operation
hard-source-webpack-plugin copied to clipboard

Fonts are not being included in second and consecutive builds

Open kerkocee opened this issue 5 years ago • 6 comments

Expected Behavior

Fonts are included in second and consecutive builds, just like the first run.

Actual Behavior

Fonts are not being included in second and consecutive builds.

Is an error being thrown?

No.

Steps to Reproduce

  1. Run the app for the first time, it builds fine and fonts are included as expected.
  2. Stop the app and run it second time, no errors with build but fonts are not included and broken on UI.

Using file-loader for ttf and woff fonts. Using postcss-loader, css-loader and extract-css-chunks-webpack-plugin/loader for scss files.

Using hard-source-webpack-plugin as following:

new HardSourceWebpackPlugin(),
new HardSourceWebpackPlugin.ExcludeModulePlugin([
  {
    test: /extract-css-chunks-webpack-plugin[\\/]dist[\\/]loader/,
  },
]),

Operating System, Node, and NPM dependency versions

Mac OS 10.13.6
Node 8.10.0

"devDependencies": {
  "@babel/cli": "^7.4.3",
  "@babel/core": "^7.4.3",
  "@babel/node": "^7.2.2",
  "@babel/polyfill": "^7.4.3",
  "@babel/preset-env": "^7.4.3",
  "@babel/preset-react": "^7.0.0",
  "@babel/preset-typescript": "^7.7.2",
  "@babel/runtime": "^7.4.3",
  "babel-loader": "^8.0.0",
  "css-loader": "^1.0.1",
  "extract-css-chunks-webpack-plugin": "^4.3.0",
  "file-loader": "^3.0.1",
  "hard-source-webpack-plugin": "^0.13.1",
  "html-webpack-plugin": "^3.2.0",
  "postcss-loader": "^2.1.6",
  "style-loader": "^0.19.0",
  "typescript": "^3.6.4",
  "webpack": "^4.27.1", 
  "webpack-cli": "^3.1.2",
  "webpack-dev-middleware": "^2.0.6",
  "webpack-hot-middleware": "^2.24.2",
  "webpack-hot-server-middleware": "^0.3.2",
}

Similar Issues

https://github.com/mzgoddard/hard-source-webpack-plugin/issues/357 https://github.com/mzgoddard/hard-source-webpack-plugin/issues/378

kerkocee avatar Nov 20 '19 14:11 kerkocee

Also an issue here - using

{
  test: /\.(svg|png|woff2?|otf|eot|ttf)$/i,
  use: {
    loader: 'file-loader'
  },
},

And all woff/otf files and some svgs don't show up on the page.

runfaj avatar Nov 22 '19 15:11 runfaj

Hello,

I'm also having this issue, did you find a workaround ?

Thanks

sydney-d avatar Feb 21 '20 16:02 sydney-d

I solved the problem like this:

new HardSourceWebpackPlugin(),
new HardSourceWebpackPlugin.ExcludeModulePlugin([
    {
        test: /file-loader/,
    },
    {
        test: /webfonts-loader/,
    },
]),

No caching fonts, no problem )

attikos avatar Apr 30 '20 09:04 attikos

@attikos's workaround works well but surely this decreases the speed of the build (and certainly increases developer time since I had to come look for this bug)

ChildishGiant avatar Jun 21 '20 18:06 ChildishGiant

I have a question, new HardSourceWebpackPlugin.ExcludeModulePlugin can only be used for loader?

can i use :

new HardSourceWebpackPlugin.ExcludeModulePlugin([
  {
    test: /js-cookie/
  }
]),

PLQin avatar Jul 22 '20 08:07 PLQin

I have a question, new HardSourceWebpackPlugin.ExcludeModulePlugin can only be used for loader?

can i use :

new HardSourceWebpackPlugin.ExcludeModulePlugin([
  {
    test: /js-cookie/
  }
]),

As the RegExp is applied to the whole request path of the module and module name is also a component of request path, I think the config you suggested above is available.

For details, debug here on yourself. ExcludeModulePlugin.js

Sociosarbis avatar Nov 14 '20 16:11 Sociosarbis