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 = "";