For anyone else running into an issue with the fonts not loading (e.g. showing the empty square glyph) despite Webpack (4) compiling and file-loader copying the fonts properly, I found an option that makes everything load as expected.

First the recommended SCSS imports with ~ node_modules path as seen in other posts:

$fa-font-path: '~@fortawesome/fontawesome-pro/webfonts'; @import '~@fortawesome/fontawesome-pro/scss/fontawesome'; @import '~@fortawesome/fontawesome-pro/scss/light';

Then you'll have the file-loader config targeting font files (above). To the file-loader options you want to add the esModule: false option. Note that this could mess with other fonts you may be importing outside of SCSS.