Rewriting URLs in webpack

Question

I'm using webpack to bundle files and import CSS. Inside a CSS file included from bootstrap, there is a font reference to /fonts/glyphicons-halflings-regular.ttf.

Is there any way to instruct webpack to mount files from /node_modules/bootstrap-css-only/fonts/ to /fonts? Or to rewrite the HTTP request through webpack dev server based on a regex expression?

Sorry if this is super basic, new to webpack.

Answer 1

You can use file loader and adjust [path] variable:

loaders: [ 
    {
      test:   /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
      loader: 'file?name=[path][name].[ext]' // your case: 'file?name=fonts/[name].[ext]'
    }
...
], 

In this case, all the matched files will be placed into the "fonts/" folder.