Webpack configureren om afbeeldingen/lettertypen in aparte submappen uit te voeren

Ik ben erin geslaagd om webpack te configureren om CSS en JS uit te voeren in respectievelijke submappen, d.w.z. public/asests/cssen public/assets/js. Ik weet echter niet hoe ik hetzelfde moet doen voor afbeeldingen en lettertypen.

Met andere woorden, ik wil afbeeldingen uitvoeren in de map public/assets/imagesen lettertypen in de map public/assets/fonts.

Hier is mijn webpack-configuratiebestand:

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

Antwoord 1, autoriteit 100%

Ik zou dit kunnen achterhalen door te verwijzen naar url-loader& file-loaderdocumentatie op GitHub.

Ik hoefde alleen maar een namequerystring-parameter in loader toe te voegen om het volledige pad op te geven. Ik heb ook geleerd dat je kunt specificeren hoe bestanden een naam moeten krijgen in de uitvoerlocatie.

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

Antwoord 2, autoriteit 17%

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

Dit is wat ik gebruik in de productie. Ik kom vaak situaties tegen waarin *.svg-afbeeldingen worden gebruikt en SVG-lettertypen voor IE-fallback. Hier neem ik aan dat lettertypen zich altijd in node_modules bevinden. Ik heb ontwikkelaars ook test: /fonts\/[w+].(svg|eot ....)zien doen.

Antwoord 3, autoriteit 13%

Webpack 5case-

Houd het hier voor het geval iemand op zoek is naar een Webpack 5-oplossing voor de vereiste om afbeeldings-/lettertype-items in afzonderlijke mappen in het uitvoerpad uit te voeren.

Webpack 5 vervangt raw-loader, url-loaderen file-loadermet Assets Module en heeft 4 nieuwe modules om assets te verwerken . Lees hier meer details – https://webpack.js.org/guides/asset-modules/

In onze probleemstelling, de volgende configuratie voert alle lettertypen/svgs uit in de directory fonts. Maar als bepaalde bestanden kleiner zijn dan 8 KB, worden ze inline gegooid.

 {
    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
    type: 'asset',   // <-- Assets module - asset
    parser: {
      dataUrlCondition: {
        maxSize: 8 * 1024 // 8kb
      }
    },
    generator: {  //If emitting file, the file path is
      filename: 'fonts/[hash][ext][query]'
    }
  }

We zouden hetzelfde kunnen doen voor afbeeldingen –

 {
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource',  //<-- Assets module - asset/resource
    generator: {
      filename: 'images/[hash][ext][query]'
    }
  }

Voert alle afbeeldingen uit naar de map images, ongeacht de bestandsgrootte.

Antwoord 4, autoriteit 5%

Ik heb dit kunnen oplossen met file-loader
Als u de Webpack 4 gebruikt, gebruikt u usein plaats van loader.

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

Antwoord 5

Configureer het uitvoerpad van het bestand/url-loader & bestandsnaam

Je kunt in de officiële file-loader documentatielezen: er is een parameter namein het configuratieobject, waar een pad kan worden opgegeven.

Dit zou het werk doen:

                        // ...
        {
            test    : /\.(woff|woff2|ttf|eot)$/,
            loader  : 'url-loader',
            options: {
                limit : 70000,
                name: 'fonts/[name].[ext]'
            }
        },
                         // ...

Ik raad je aan om de beschikbare tijdelijke aanduidingente bekijken, om te weten wat er in een bestandsnaam kan worden gebruikt.

Loaders hebben meestal een configuratie-object beschikbaar, zelfs als je de opties kunt doorgeven zoals andere ontwikkelaars hebben voorgesteld (loader:'url-loader?limit=1024&name=images/[name].[ext]')
Ik zou liever een gewone objectconfiguratie gebruiken, om iets leesbaars te hebben en ook gemakkelijker te configureren/debuggen

Uitvoerpad

Er is een outputPath(optioneel) configuratieparameter, voor het geval men het standaard uitvoerpad wil overschrijven, dat in ieder geval moet worden geconfigureerd (controleer de documenten).
Ik ben er vrij zeker van dat webpack voor zijn laders de standaard uitvoermap zal gebruiken. In mijn project heb ik dit:

                        // ...
output: {
    path: helpers.publicPath(),      // local output path: <project-root>/public
    publicPath,                      // same path on the server: /myapp/public
    filename: 'js/[name].bundle.js', // default output configuration for js
    chunkFilename: 'js/[name].chunk.js'
},
                         // ...

Opmerking

Ik weet niet zeker of je de map node_modulesmoet uitsluiten: in het geval dat bibliotheken zoals font-awesome of material-icons worden gebruikt, dan moet je node_modules opnemen. Webpack laat automatisch bestanden weg die niet nuttig zijn om het project te laten bouwen & loop.
Ik zou alleen mappen uitsluiten die oude legacy-scripts bevatten die geen import en dergelijke gebruiken, en ik wil in geen geval door webpack worden beschouwd.