堆棧內存溢出
  簡體   English   中英

Webpack字體包含問題

[英]Webpack Font Include Issue

 原文  2016-01-06 18:03:35  6   1    css/ heroku/ fonts/ sass/ webpack

問題描述

我有一個非常有趣的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和lo，發現一切正常。

我將應用程序部署到heroku上，直到我訪問我的網站時，我才注意到我的css文件已從2.8 MB增加到57.3 MB 2.8 MB 。 是的，您沒聽57.3 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;

1 個解決方案

解決方案1
 5  2016-04-14 22:51:07

例如，嘗試將限制減少到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文件夾中。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Webpack 5 字體資源問題，沒有錯誤但也沒有字體 使用Webpack加載字體：字體解碼問題 無法使用webpack解析font-face include 字體真棒不工作webpack 使用webpack包含引導程序 Webpack 加載字體圖標但不加載字體本身 帶有 Webpack 的 Font Awesome 5 偽元素 webpack字體無法解析 webpack 未加載@font-face Webpack：無法解碼下載的字體
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM