Npm 如何使用webpack发出的字体文件？_Npm_Fonts_Webpack_Font Awesome_Webpack 2

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

npm fonts webpack

Npm 如何使用webpack发出的字体文件？,npm,fonts,webpack,font-awesome,webpack-2,Npm,Fonts,Webpack,Font Awesome,Webpack 2,摘要： webpack问题，除了bundle.js，还有font-awesome的字体文件。这些文件未在bundle.js中正确引用详细信息：我有一个entry.js文件，它输出到子目录（dist）的子目录（webpack）dist是独立的CDN可分发目录。这种结构是基于特定于站点生成器的原因（这与此问题无关） index.html加载webpack/bundle.js并尝试使用字体： <!DOCTYPE html> <html lang="en"> <

摘要：

webpack

问题，除了

bundle.js

，还有

font-awesome

的字体文件。这些文件未在

bundle.js

中正确引用

详细信息：

我有一个

entry.js

文件，它输出到子目录（

dist

）的子目录（

webpack

）

dist

是独立的CDN可分发目录。这种结构是基于特定于站点生成器的原因（这与此问题无关）

index.html

加载

webpack/bundle.js

并尝试使用字体：

<!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/…
）

组件文件：

entry.js

：

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

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"
            }
        ]
    }
};

webpack.config.js

：

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

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用作一个模块

添加解决了这个问题：

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

路径应该是捆绑包和其他发出的文件输出到的路径，相对于公开站点的根（

http://example.com/

）