Настроить webpack для вывода изображений/шрифтов в отдельные подпапки

Мне удалось настроить webpack для вывода CSS и JS в соответствующие подкаталоги, т.е. public/asests/css и public/assets/js. Однако я не знаю, как сделать то же самое для изображений и шрифтов.

Другими словами, я хочу выводить изображения в папку public/assets/images и шрифты в папку public/assets/fonts.

Вот мой конфигурационный файл webpack:

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'
            }
        ]
    }
}

Ответы

Ответ 1

Я мог бы понять это, обратившись к url-loader и file-loader документации по GitHub.

Все, что мне нужно было сделать, это добавить в загрузчик параметр строки имя, чтобы указать полный путь. Я также узнал, что вы можете указать, как файлы должны быть указаны в месте вывода.

{
    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]'
}

Ответ 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'
    ]
}

Это то, что я использую в производстве. Я часто сталкиваюсь с ситуацией, когда используются изображения *.svg и шрифты SVG для резервного копирования IE. Здесь я предполагаю, что шрифт всегда находится внутри node_modules. Я также видел, как разработчики делали test: /fonts\/[w+].(svg|eot ....).

Ответ 3

Я смог решить эту проблему с помощью загрузчика файлов. Если вы используете Webpack 4, синтаксис немного другой.

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