使用webpack的本地網絡字體

我想在我的React項目中使用一些本地網絡字體。我將它們包含在我的main.scss文件中，並通過webpack加載它們。該包正確構建，包括main.scss樣式。我看到webpack加載字體文件，並將它們複製到public/fonts /，但是我的軟件包文件找不到字體。使用webpack的本地網絡字體

據我所知，你的@ font-face src應該與bundle的位置有關。我將它設置爲與我在webpack中加載字體相同的路徑，'./fonts/'。我看到確切的錯誤是：

file:///Users/myusername/Documents/folder1/folder2/folder3/APP/fonts/FoundersGroteskWeb-Regular.woff net::ERR_FILE_NOT_FOUND

我一直在嘗試不同的路徑配置，並且使用的WebPack的publicPath選項，但我在這一點上兜兜了什麼似乎像一個非常簡單的參考錯誤。

文件結構：

APP 
├──webpack.config.js 
├──src 
    ├──app 
     ├──App.jsx 
     ├──styles 
      ├──main.scss 
      ├──fonts 
       ├──allthefonts.woff 
    ├──public 
     ├──bundle.js 
     ├──fonts 
      ├──allthefonts.woff

App.jsx：

require('./styles/main.scss');

main.scss：

@font-face { 
    font-family: FoundersGrotesk; 
    src: url('./fonts/FoundersGroteskWeb-Bold.eot') format('eot'), 
     url('./fonts/FoundersGroteskWeb-Bold.woff') format('woff'), 
     url('./fonts/FoundersGroteskWeb-Bold.woff2') format('woff2'); 
    font-weight: bold; 
} 

@font-face { 
    font-family: FoundersGrotesk_Cnd; 
    src: url('./fonts/FoundersGrotXCondWeb-Bold.eot') format('eot'), 
     url('./fonts/FoundersGrotXCondWeb-Bold.woff') format('woff'), 
     url('./fonts/FoundersGrotXCondWeb-Bold.woff2') format('woff2'); 
    font-weight: bold; 
} 

@font-face { 
    font-family: FoundersGrotesk; 
    src: url('./fonts/FoundersGroteskWeb-Regular.eot') format('eot'), 
     url('./fonts/FoundersGroteskWeb-Regular.woff') format('woff'), 
     url('./fonts/FoundersGroteskWeb-Regular.woff2') format('woff2'); 
    font-weight: normal; 
}

個webpack.config.js：

'use strict'; 

const webpack = require('webpack'); 
const PROD = JSON.parse(process.env.PROD_ENV || '0'); 

module.exports = { 

    entry: './src/app/App.jsx', 

    output: { 
    path: './src/public/', 
    filename: PROD ? 'bundle.min.js' : 'bundle.js' 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: '/node_modules/', 
     query: { 
      presets: ['es2015', 'react', 'stage-1'] 
     } 
     }, 
     { 
     test: /\.s?css$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=./fonts/[name].[ext]' 
     } 
    ] 
    } 
};

來源

2016-12-26 johnjohn

不要用'eot'字體麻煩 - 他們只爲IE8及以下，微軟在2016年IE9的月及以上的所有支持WOFF拋棄。在另一個注意事項上：不要將你的靜態資產放入你的包中，將它們作爲靜態內容提供。它爲您和您的用戶節省了大量的帶寬，因爲靜態資產一直以來一直存在，並且一直保持到瀏覽器緩存的狀態。如果將它們捆綁在一起，就會迫使海量數據沒有通過網絡改變，導致用戶花費金錢，耗費用戶時間，並導致不必要的糟糕體驗。 –

@ Mike'Pomax'Kamermans我可能會誤解，但不是文件加載器只是將資源從dev目錄複製到build目錄，這樣bundle可以輕鬆引用它們？這是我在文章/ SO帖子中看到的處理圖像或字體的方法，我不知道你會如何使用它們。 – johnjohn

如果我們談論的是https://github.com/webpack/file-loader，那麼：有點兒，但它也做了各種各樣的時髦的重命名。如果您只需要資產重新定位，那麼使用「cp assets build」代替它更有意義。無論如何，你的JS代碼不需要「需要」靜態資產 –

在this thread得到了有效的解決方案感謝@omerts。涉及使用publicPath的解決方案。我一直試圖將它作爲module.exports中帶有字體文件加載器的選項來使用，而不是輸出。

更新webpack.config.js：

const webpack = require('webpack'); 
const PROD = JSON.parse(process.env.PROD_ENV || '0'); 
const path = require('path'); 

const PATHS = { 
    build: path.join(__dirname, './src/public') 
}; 

module.exports = { 

    entry: './src/app/App.jsx', 

    output: { 
    path: PATHS.build, 
    filename: PROD ? 'bundle.min.js' : 'bundle.js', 
    publicPath: PATHS.build 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: '/node_modules/', 
     query: { 
      presets: ['es2015', 'react', 'stage-1'] 
     } 
     }, 
     { 
     test: /\.s?css$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=/fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|png)$/, 
     loader: 'file-loader?name=/fonts/[name].[ext]' 
     } 
    ] 
    }, 

    plugins: PROD ? [ 
    new webpack.optimize.UglifyJsPlugin({ 
     beautify: false, 
     comments: false, 
     compress: { 
     warnings: false, 
     drop_console: true 
     }, 
     mangle: { 
     except: ['$'], 
     screw_ie8: true, 
     keep_fnames: false 
     } 
    }) 
    ] : [] 
};

來源

2016-12-29 01:03:20 johnjohn

一個更好的辦法是使用「網址加載器」，並添加下面的行裝載機。

{ 
    test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, 
    loader: 'url-loader?limit=100000' 
}

來源

2017-08-26 22:48:08 yellowcode

使用webpack的本地網絡字體

回答

相關問題