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文件作为条目，这意味着它们成为捆绑包，每个文件的内容成为捆绑包中的第零个模块。因此，不是看到每个文件都复制到同一目录，而是为每个glyphicon文件创建了一个包，该包仅包含通过公共路径对复制文件的引用。

如果您只需要复制文件，建议您使用任务运行器like Gulp或copy webpack plugin。

一些背景信息：

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

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

1 个答案: