正如之前发生在许多其他人身上的情况一样,webpack 根本没有将我的任何字体加载到构建中。我查看了开发板,搜索了 google,尝试了许多不同的正则表达式技巧,并尝试了其他技术,例如 npm 的 copy-webpack-plugin。构建通过通用的“npm start”运行。请看一下下面的目录结构和我的 webpack 构建文件,并告诉我可能缺少什么。谢谢:-P
目录结构(CAPS 中的文件夹):
/
- index.html
- index.js
- webpack.config.js
- server.js
ASSETS
FONTS
<font files>
COMPONENTS
CONTAINERS, etc..
我的 webpack 文件(在底部测试字体):
var path = require('path')
var webpack = require('webpack')
var CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'whatwg-fetch',
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: [ 'react-hot', 'babel' ],
exclude: /node_modules/,
include: __dirname
}, {
test: /\.css?$/,
loaders: [ 'style', 'raw' ],
include: __dirname
},
{
test: /\.less$/,
loaders: ['style', 'css', 'less'],
include: __dirname
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }]
}
}
最佳答案
我从来不需要测试中的所有正则表达式。
我的 webpack 文件之一的示例:
module: {
loaders: [
// Javascript
{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },
// Stylesheets
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') },
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' }
]
},
关于javascript - webpack 未加载我的字体文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41884053/