Webpack字体包含问题
作者：小妖694_807 | 2023-09-08 11:51
如何解决《Webpack字体包含问题》经验，为你挑选了1个好方法。
我有这个非常有趣的webpack问题,我无法理解为我的生活.
我有像这样的标准font-face声明:
// 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;
}
```
现在我注意到使用require工作正常,除了我的手机上没有加载任何字体.所以我转而require去看看url,这一切都奏效了.
我将我的应用程序部署到heroku,直到我访问我的网站时才发现我的css文件已经发展到57.3 MB了2.8 MB.是的,你听到了,57.3 MB.我通过require在我的font-face声明中使用切换到使用url以确认实际发生的情况来测试它三次.
有没有人经历过类似的事情？我在下面包含了我的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 " "
}
}),
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&output + 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;
Mush..
5
例如,尝试将限制减少到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]"]
}
上面的加载器会将您的字体文件复制到目标文件夹中的fonts文件夹.
1> Mush..：
例如,尝试将限制减少到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]"]
}
上面的加载器会将您的字体文件复制到目标文件夹中的fonts文件夹.
京公网安备 11010802040832号 | 京ICP备19059560号-6 