Webpack 4 - 將字體文件復制到特定位置

Question

我有以下 Webpack 配置，可以將 glyphicon 字體文件復制到我的目標位置：

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

您將 glyphicon 文件用作條目，這意味着它們成為包，並且每個文件的內容成為其包中的第零個模塊。 因此，您不是看到每個文件都復制到同一目錄，而是為每個字形文件創建一個包，該包僅包含通過公共路徑引用的復制文件。

如果您需要做的只是復制文件，我建議您使用Gulp 之類的任務運行器，或者使用copy webpack 插件。

---

一些背景資料：

file-loader器file-loader器將file-loader復制到您的 webpack 配置中定義的輸出目錄，在您的情況下是path.resolve(__dirname, '.') ，然后客戶端通過公共路徑獲取它資產。

它不包含 webpack 生成的實際包中的文件內容。

正如您在配置中看到的，glyphicon 文件僅按名稱引用：

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

其中__webpack_require__.p是公共路徑，如您的包中的第 80 行所定義：

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