Настройте 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'
            }
        ]
    }
}
58
задан 11 October 2015 в 00:02

1 ответ

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

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader?name=fonts/[name].[ext]']
}
1
ответ дан 1 November 2019 в 14:37

Другие вопросы по тегам:

Похожие вопросы: