Pracowałem nad projektem, w którym muszę użyć funkcji outputPath z programu ładującego pliki, aby emitować pliki do różnych folderów, ale miałem trudności ze zrozumieniem i uruchomieniem.

Część mojego kodu jest następująca:

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');


const fs = require('fs'); // fs stands for file system, it helps accessing phyisical file systems
const BRANDS = {
br1: 'br1.local',
b22: 'br2.local'
};


module.exports = {
mode: 'production',
entry: {
    main: './src/js/main.js'
},
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js'
},
module: {
    rules: [
        {
            test: /\.(png|jpg|gif)$/, 
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]',
                outputPath: (url, resourcePath, context) => {
                   if (/my-custom-image\.png/.test(resourcePath)) {
                      return `other_output_path/${url}`;
                     }

                    if (/images/.test(context)) {
                      return `image_output_path/${url}`;
                    }

                   return `output_path/${url}`;
                }
            }
        },


    ]
},

Dokumentacja mówi, że ścieżka_zasobu jest bezwzględną ścieżką do zasobów. Nie jestem tego pewien, ponieważ mój folder zasobów ma inną nazwę, a nie zasoby, czy to ma znaczenie? wygląda tak: / src / images . Co to jest kontekst, nie wiem, jaki jest mój kontekst. Kiedy robię console.log tych argumentów, pokazuje undefined i nie emituje obrazów do odpowiednich folderów.

1
MariaZ 20 listopad 2019, 12:19
Upewnij się, że korzystasz z file-loader 3.0.0 lub nowszego. changelogs.md/github/webpack-contrib/file-loader
 – 
Kevin Farrugia
9 lipiec 2020, 18:30

1 odpowiedź

Musisz tylko dodać nazwę swojego folderu w instrukcji if. Jeśli twoje drzewo folderów wygląda tak:

/źródło/obrazy/podfolder/

Zmień kod na ten:

outputPath: (url, resourcePath) => {
                 if (/subfolder/.test(resourcePath)) {
                     return `images/subfolder/${url}`;
                 }
             return `images/${url}`;
             }
3
Ramazan 20 grudzień 2019, 20:55