Configure webpack to output images / fonts to separate subfolders

Question

I managed to configure webpack to output CSS and JS to the appropriate subdirectories, i.e. public/asests/css and public/assets/js . However, I do not know how to do the same for images and fonts.

In other words, I want to output images to the public/assets/images folder and fonts to the public/assets/fonts folder.

Here is my webpack configuration file:

 var path = require('path'); var ExtractCSS = require('extract-text-webpack-plugin'); module.exports = { context: path.resolve('private/js'), resolve: ['', '.js', '.jsx', '.es6', '.json'], entry: { homepage: './homepage' }, output: { path: path.resolve('public/assets'), publicPath: '/public/assets/', filename: 'js/[name].js' }, plugins: [ new ExtractCSS('css/[name].css') ], devServer: { contentBase: 'public' }, module: { loaders: [ { test: /\.(es6|js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, exclude: /node_modules/, loader: ExtractCSS.extract('style-loader', 'css-loader') }, { test: /\.less$/, exclude: /node_modules/, loader: ExtractCSS.extract('style-loader', 'css-loader!less-loader') }, { test: /\.(jpg|jpeg|gif|png|woff|woff2|eot|ttf|svg)$/, exclude: /node_modules/, loader: 'url-loader?limit=1024' } ] } } 

Answer 1

I could understand this by referring to the url-loader and file-loader documentation on GitHub.

All I had to do was add a string name parameter to the bootloader to indicate the full path. I also found out that you can specify how files should be specified at the output location.

 { test: /\.(jpg|jpeg|gif|png)$/, exclude: /node_modules/, loader:'url-loader?limit=1024&name=images/[name].[ext]' }, { test: /\.(woff|woff2|eot|ttf|svg)$/, exclude: /node_modules/, loader: 'url-loader?limit=1024&name=fonts/[name].[ext]' } 

Answer 2

 { test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i, include: folders.npm, loader: 'file?name=fonts/[name].[ext]' }, { test: /\.(jpe?g|png|gif|svg|ico)$/i, include: folders.src, loaders: [ 'file?name=images/[sha512:hash:base64:7].[ext]', 'image-webpack?progressive=true&optimizationLevel=7&interlaced=true' ] } 

This is what I use in production. I often come across a situation where * .svg images and SVG fonts are used for IE backup. Here, I assume that the font is always inside node_modules. I also saw how the developers did test: /fonts\/[w+].(svg|eot ....) .

Answer 3

I was able to solve this problem using a file downloader. If you are using Webpack 4, the syntax is slightly different.

 { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader', 'file-loader?name=fonts/[name].[ext]'] }