个人中心
gpt4 book ai didi

css - Webpack字体包含问题

转载 作者：行者123 更新时间：2023-12-01 12:55:00 25 4
gpt4 key购买 nike

我有一个非常有趣的webpack问题，我一生都无法解决。

我有这样的标准字体声明:

// 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切换到使用 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 "<!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;

最佳答案

例如，尝试将限制减少到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文件夹中。

关于css - Webpack字体包含问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34639720/

25 4 0
文章推荐： wcf - 无法使用 Fiddler 将 JSON 发布数据传递到 WCF REST 服务
文章推荐： Java 验证 - 将 @Valid 约束添加到自定义约束会引发 "@Valid is not applicable to annotation type"
文章推荐： java - Apache Camel SEDA 异常处理
文章推荐： ruby-on-rails - Prawn pdf组、事务和回滚方法问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com