html字体库otf文件使用,在webpack中加载.otf字体文件的正确方法是什么？

使用webpack时加载.otf字体文件的适当方式是什么？我曾多次尝试包括在我的webpack.config.js的规则，没有任何成功的基础上，很多例子我大致如下的线路看出：对于在webpack中加载.otf字体文件的正确方法是什么？

{ test: /\.(eot|svg|ttf|otf|woff)$/, use: 'file-loader' }

//or

{ test: /\.(eot|svg|ttf|otf|woff)$/, use: 'url-loader' }

//or

{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, use: 'file-loader' }

//...etc

我已经在我的webpack.config.js设置以下其他文件类型，这是成功的工作：

module.exports = {

//...

module: {

rules: [

{ test: /\.(js)$/, use: 'babel-loader' },

{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},

{ test: /\.(jpe?g|png|gif|svg|xml)$/i, use: 'file-loader'}

]

},

//...

}

尽管我的各种尝试添加另一个规则/案例杂项文件的文件，我总是得到以下错误：

Module parse failed: .../fonts/[name-of-my-font].otf Unexpected character ' ' (1:4) You may need an appropriate loader to handle this file type.

我已在我的根目录下的文件夹fonts的杂项文件文件，并在我的index.css我：

@font-face {

font-family: 'name-of-my-font';

src: url('fonts/name-of-my-font.otf'),

format('opentype');

}

任何人都经历了类似的问题，并发现了一个解决方案？

感谢， 奥斯汀

根据注释要求更多我webpack.config.js文件，这里是我的整个webpack.config.js：

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './app/index.js',

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'index_bundle.js',

publicPath: '/'

},

module: {

rules: [

{ test: /\.(js)$/, use: 'babel-loader' },

{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},

{ test: /\.(jpe?g|png|gif|svg|xml)$/i, use: 'file-loader' }

]

},

devServer: {

historyApiFallback: true,

},

plugins: [

new HtmlWebpackPlugin({

template: 'app/index.html'

})

]

};

+0

你可以从你的webpack配置中分享你完整的'module.loaders'吗？ –

+0

@Bulkan我已经修改了我的问题，在最后包含了我完整的'webpack.config.js'。这有帮助吗？ –

+0

你确定你已经安装了url-loader和file-loader？ –