CODEWITHSUNDEEP
webpackwebpack-file-loaderwebpack-5
Bonomi
Bonomi

Reputation: 2753

Can't resolve '/fonts/mem.woff2' in 'D:\Programming\Demos\webpack-compact\src' using absolute path

I am configuring Webpack in an existing project and I was avoiding to change the project structure. In the scss files I have includes that start with / (e.g. url('/fonts/mem.woff2')) and I believe this is the cause of my issue.

styles.scss

@font-face {
    font-family: 'MyFont';
    src: url('/fonts/mem.woff2') format('woff2'),
      url('/fonts/slick.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

And the error:

Error: Can't resolve '/fonts/mem.woff2' in 'D:\Programming\Demos\webpack-compact\src' at finishWithoutResolve (D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.js:293:18) at D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.js:362:15 at D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.js:410:5 at eval (eval at create (D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\node_modules\tapable\lib\Hoo at D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.js:410:5 at eval (eval at create (D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\node_modules\tapable\lib\Hoo at D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Descriptio at D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.j at eval (eval at create (D:\Programming\Demos\webpack-compact\node_modules\enhanced- at D:\Programming\Demos\webpack-compact\node_modules\enhanced-resolve\lib\Resolver.j

My webpack file looks like the following:

module.exports = env => {
const isDev = env.NODE_ENV == 'dev';

return {
    target: 'web',
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {            
        index: path.resolve(__dirname, "src", "index.js")
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),            
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: '8080',
        host: 'localhost',
        hot: true,
        open: true,
        inline: true
    },
    plugins: [
        new CleanWebpackPlugin(),            
        new HtmlWebpackPlugin({
            title: 'Development',
            template: path.resolve(__dirname, "src", "index.html"),
            filename: 'index.html',
        })
    ],
    module:{
        rules: [               
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/',
                },
            }
            ...

I know if I change the font path to that with ./ it will work. My question is, is it possible to change only webpack configuration instead of going to all scss files and change the path on url('/fonts/mem.woff2')?

Upvotes: 0

Views: 1787

Answers (1)

Sam Chen
Sam Chen

Reputation: 2148

I believe it's possible with webpack.NormalModuleReplacementPlugin.

Here's how you can make it:

plugins: [
 //…
 new webpack.NormalModuleReplacementPlugin(
      /^\/fonts\/mem\.woff2/,
      function (resource) {
        resource.request = resource.request.replace(/^\//, './');
      }
    )
]

Since you have two fonts in your example, you can apply another webpack.NormalModuleReplacementPlugin plugin.

Upvotes: 0

Related Questions