Webpack 4 - копировать файлы шрифтов в определенное место

Question

У меня есть следующий конфиг Webpack, чтобы скопировать файлы шрифта глифика в мое целевое местоположение:

var webpack = require('webpack');
const path = require('path');

module.exports = {
    devtool: 'source-map',
    mode: 'production',
    entry: {
        'target/web-resources/resources/lib/fonts/glyphicons-halflings-regular.eot': './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot',
        'target/web-resources/resources/lib/fonts/glyphicons-halflings-regular.svg': './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',
        'target/web-resources/resources/lib/fonts/glyphicons-halflings-regular.ttf': './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',
        'target/web-resources/resources/lib/fonts/glyphicons-halflings-regular.woff': './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',
        'target/web-resources/resources/lib/fonts/glyphicons-halflings-regular.woff2': './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2',
    },
    module: {
        rules: [
            { test: /\.(svg|eot|woff|woff2|ttf)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: '[name].[ext]'
                    }
                }]
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, '.'),
        filename: '[name]'
    }

};

После запуска webpack файл создается, но со следующим содержимым: https://pastebin.com/WbyMBQVz

Что не так с моим конфигом, что он не использует файл без замены содержимого?

Answer 1

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

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

---

Некоторая справочная информация:

file-loaderloader копирует файл в выходной каталог, определенный в конфигурации вашего веб-пакета, который в вашем случае будет path.resolve(__dirname, '.'), чтобы клиент мог получить его по общедоступному пути к вашим ресурсам.

Это невключите содержимое файла в фактический пакет, созданный веб-пакетом.

Как вы можете видеть в конфигурации, на файл глифы ссылается только имя:

__webpack_require__.p + "glyphicons-halflings-regular.eot";

Где __webpack_require__.pоткрытый путь, определенный в строке 80 вашего комплекта:

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";