[英]Webpack Font Include Issue
I have this really interesting webpack problem that I cannot figure out for the life of me. 我有一个非常有趣的webpack问题,我一生都无法解决。
I have the standard font-face declarations like so: 我有这样的标准字体声明:
// MarkOT-ExtraLight
@font-face {
font-family: 'MarkOT-ExtraLight';
src: require('MarkOT-ExtraLight.eot?#iefix') format('embedded-opentype'),
require('MarkOT-ExtraLight.otf') format('opentype'),
require('MarkOT-ExtraLight.woff') format('woff'),
require('MarkOT-ExtraLight.ttf') format('truetype'),
require('MarkOT-ExtraLight.svg#MarkOT-ExtraLight') format('svg');
font-weight: normal;
font-style: normal;
}
``` ```
Now I noticed that using require
worked fine except that none of my fonts were loading on my phone. 现在,我注意到使用
require
工作,只是我的字体没有加载到手机上。 So I switched from require
to url
and lo and behold, it all worked. 所以我从
require
切换到url
和lo,发现一切正常。
I deployed my app to heroku and it wasn't until I visited my site that I noticed that my css file had grown to 57.3 MB
from 2.8 MB
. 我将应用程序部署到heroku上,直到我访问我的网站时,我才注意到我的css文件已从
2.8 MB
增加到57.3 MB
2.8 MB
。 Yes you heard that right, 57.3 MB
. 是的,您没听
57.3 MB
, 57.3 MB
。 I tested it three times by switching from using require
in my font-face declarations to using url
to confirm that's what was actually happening. 我通过从在我的字体说明中使用
require
切换到使用url
来确认这是实际发生的情况来进行了三次测试。
Has anyone ever experienced something similar? 有没有人经历过类似的事情? I've included my webpack config below.
我在下面包含了我的webpack配置。
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//Environment constants
const DEVELOPMENT = "development";
const PRODUCTION = "production";
// Functions for resolving all the aliases
var path_base = path.resolve(__dirname, '../');
const resolve = path.resolve;
const base = function() {
var args = [path_base];
args.push.apply(args, arguments);
return resolve.apply(resolve,args);
};
const resolve_alias = base.bind(null, 'src/client');
const aliases = [
'actions',
'components',
'constants',
'containers',
'middleware',
'reducers',
'routes',
'store',
'styles',
'utils'
];
const resolved_aliases = aliases.reduce(function(accumulator, directory){
accumulator[directory] = resolve_alias(directory);
return accumulator;
}, {});
const productionVendors = [
'react',
'react-dom',
'react-router',
'redux',
'react-redux',
'redux-simple-router',
'classnames',
'underscore',
'history',
'immutable',
'object-assign',
'rx',
'slick-carousel',
'redux-actions'
];
const developmentVendors = [
'react',
'react-dom',
'react-router',
'redux',
'react-redux',
'redux-simple-router',
'classnames',
'underscore',
'history',
'immutable',
'redbox-react',
'object-assign',
'rx',
'slick-carousel',
'redux-actions'
];
const devPlugins = [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
templateContent: function(templateParams, webpackCompiler) {
return "<!DOCTYPE html><html><head lang='en'><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1'><title>Busy - Better marketing for all.</title></head><body><div id='app'></div><script src='vendors.js'></script><script src='main.js'></script></body></html>"
}
}),
new BrowserSyncPlugin(
{
host: 'localhost',
port: 7000,
proxy: 'http://localhost:8080/webpack-dev-server/'
},
{
reload: false
}
)
]
const productionPlugins = [
new ExtractTextPlugin('[name].css'),
new webpack.IgnorePlugin(/\/config$/),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(PRODUCTION)
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
const environment = process.env.NODE_ENV || DEVELOPMENT;
var config = {
context: path.resolve(__dirname, '..'),
entry: {
main:
[
'font-awesome-webpack!./src/client/theme/font-awesome.config.js',
path.resolve(__dirname, '..', 'src/client/index.js')
]
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
pathInfo: true,
filename: '[name].js'
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: "eslint-loader",
exclude: /node_modules/
}
],
loaders: [
{
test: /src\/.+.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.otf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-sfnt" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?mimetype=image/svg+xml" },
{
test: /\.(jpe?g|gif|png)$/,
loader: 'url?25000'
},
{
test: /\.mp4$/,
loader: 'file',
exclude: /node_modules/
}
]
},
resolve: {
alias: resolved_aliases,
modulesDirectories: [
'node_modules',
'src'
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
};
// Vendor splitting
config.entry.vendors = environment === DEVELOPMENT ? developmentVendors : productionVendors
if (environment === DEVELOPMENT) {
config.plugins = config.plugins.concat(devPlugins);
} else if (environment === PRODUCTION) {
config.plugins = config.plugins.concat(productionPlugins);
}
// Add development server entry points
if (environment === DEVELOPMENT) {
config.entry.main.unshift('webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server');
}
// Add dev tool configurations
if (environment === DEVELOPMENT) {
config.devServer = {
hot: true,
host: 'localhost',
port: 8080,
proxy: {"/*": "http://localhost:3000"}
}
}
// Configure CSS and Sass loaders
if (environment === DEVELOPMENT) {
config.module.loaders.push({ test: /.(scss|css)$/, loader: 'style!css?modules&importLoaders=3&localIdentName=[local]___[hash:base64:5]&sourceMap!autoprefixer?browsers=last 2 version!resolve-url!sass?sourceMapContents&outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') });
} else if (environment === PRODUCTION) {
config.module.loaders.push({ test: /.(scss|css)$/, loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=3&localIdentName=[local]___[hash:base64:5]&sourceMap!autoprefixer?browsers=last 2 version!resolve-url!sass?sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') ) });
} }
// Configure devtool
if (environment === DEVELOPMENT) {
config.devtool = 'inline-source-map';
} else if (environment === PRODUCTION) {
config.devtool = 'source-map';
}
module.exports = config;
Try to reduce the limit to 100 for example, that will prevent webpack to include the fonts inside the file. 例如,尝试将限制减少到100,这样将阻止webpack在文件中包含字体。
{
test: /\.(woff2|woff|ttf|eot|svg|otf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loaders: ["url-loader?limit=100&name=fonts/[name]_[hash].[ext]"]
}
The loader above will copy your fonts file to your a fonts folder inside the your destination folder. 上面的加载程序会将您的字体文件复制到目标文件夹内的fonts文件夹中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.