web-dev-qa-db-fra.com

Configurer Webpack pour afficher les images/polices dans des sous-dossiers distincts

J'ai réussi à configurer Webpack pour générer CSS et JS dans des sous-répertoires respectifs, à savoir public/asests/css et public/assets/js. Cependant, je ne sais pas comment faire la même chose pour les images et les polices.

En d'autres termes, je veux exporter les images dans le dossier public/assets/images et les polices dans le dossier public/assets/fonts. 

Voici mon fichier de configuration 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'
            }
        ]
    }
}
webpack
54
Pratik Mehta

Je pourrais comprendre cela en faisant référence à url-loader & file-loader documentation sur GitHub.

Tout ce que j'avais à faire, c'était d'ajouter un paramètre name query-string dans le chargeur pour spécifier le chemin complet. J'ai aussi appris que vous pouvez spécifier comment les fichiers doivent être nommés à l'emplacement de sortie.

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

C'est ce que j'utilise en production. Je rencontre souvent des situations où des images * .svg sont utilisées et des polices SVG pour le repli IE Ici, je suppose que les polices sont toujours à l'intérieur de node_modules. J'ai aussi vu des développeurs faire test: /fonts\/[w+].(svg|eot ....).

12
gcerar

J'ai pu résoudre ce problème avec file-loader Si vous utilisez Webpack 4, vous utiliseriez use au lieu de loader.

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