Webpack 网页4-将字体文件复制到特定位置

我有以下Web包配置，用于将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]'
    }

};

运行Web包后，将创建文件，但包含以下内容：

---

“我的配置”在没有内容替换的情况下不按原样使用文件有什么问题？

您使用glyphicon文件作为条目，这意味着它们成为捆绑包，每个文件的内容成为捆绑包中的第0个模块。因此，您没有看到每个文件复制到同一目录，而是为每个glyphicon文件创建一个捆绑包，该捆绑包仅包括通过复制文件的公共路径进行的引用

如果您只需要复制文件，我建议您使用任务运行程序，或使用

---

一些背景信息：

文件加载器

加载器将文件复制到Web包配置中定义的输出目录，在您的情况下，该目录将是

path.resolve（_dirname，'.'）

，以便客户端通过资产的公共路径获取该文件

它不包括webpack生成的实际捆绑包中的文件内容

正如您在配置中看到的，glyphicon文件仅由名称引用：

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

其中

\uuu webpack\u require\uuu.p

是公共路径，如捆绑包第80行所定义：

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