如何使用 webpack 发出的字体文件？

Question

总结：

webpack 问题，除了 bundle.js，font-awesome 的字体文件。 bundle.js.

中未正确引用这些文件

详情：

我有一个 entry.js 文件输出到子目录 (dist) 的子目录 (webpack)。 dist 是独立的 CDN 可分发目录。这种结构是出于网站生成器特有的原因（这对这个问题无关紧要）。

(root folder for the site dev)
│   entry.js
│   webpack.config.js
│
└───dist
    │   index.html
    │
    └───webpack
            674f50d287a8c48dc19ba404d20fe713.eot
            912ec66d7572ff821749319396470bde.svg
            af7ae505a9eed503f8b8e6982036873e.woff2
            b06871f281fee6b241d60582ae9369b9.ttf
            bundle.js
            fee66e712a8a08eef5805a46892932ad.woff

index.html 加载 webpack/bundle.js 并尝试使用 Font Awesome：

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        hello world <i class="fa fa-shower"></i>
        <script src="webpack/bundle.js"></script>
    </body>
</html>

未正确引用字体文件，bundle.js 在站点的根目录中查找它们，而它们在 webpack 中，它们与 bundle.js 一起输出。换句话说，bundle.js 不知道 webpack.config.js 指示它转到子目录。控制台输出（console output）：

index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/af7ae505a9eed503f8b8e6982036873e.woff2 net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/fee66e712a8a08eef5805a46892932ad.woff net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/b06871f281fee6b241d60582ae9369b9.ttf net::ERR_FILE_NOT_FOUND

如何提高对 bundle.js 的这种认识，以便它在同一级别引用其输出生成的同行（在我的情况下为 /webpack/...）？

组件文件：

entry.js:

import 'font-awesome/css/font-awesome.css'

webpack.config.js:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname + '/dist/webpack', // should use the path module
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
        ]
    }
};

注意：在 CSS 文件中导入的字体不会出现此问题，到目前为止，我遇到的唯一情况是将 Font Awesome 用作模块

Answer 1

解决方案的所有功劳归于Jiggneshh Gohel and his detailed post on webpack GithHub

添加publicPath解决问题：

output: {
        path: __dirname + '/dist/webpack', // should use the path module
        filename: "bundle.js",
        publicPath: "/webpack/",
    },

路径应该是捆绑包和其他发出的文件输出到的路径，相对于暴露站点的根目录 (http://example.com/)。

如何使用 webpack 发出的字体文件？

How to use font files emitted by webpack?

fonts

npm

font-awesome

webpack

webpack-2