2017-01-26 6 views
0

これまで多くの人に起こったように、webpackは自分のフォントをビルドにロードしていないだけです。私はボードを見て、Googleを検索し、多くの異なる正規表現のトリックを試し、npmからcopy-webpack-pluginのような他のテクニックを試しました。ビルドは一般的な 'npm start'を介して実行されます。以下のディレクトリ構造と私のWebpackビルドファイルを見て、私が何が欠けているか教えてください。 THX :-Pwebpackは私のフォントファイルをロードしていません

ディレクトリ構造(CAPS内のフォルダ):(下部のフォントのためのテスト)

/ 
- index.html 
- index.js 
- webpack.config.js 
- server.js 
ASSETS 
    FONTS 
    <font files> 
COMPONENTS 
CONTAINERS, etc.. 

私WebPACKのファイル:私はすべての正規表現を必要としたことがありません

var path = require('path') 
var webpack = require('webpack') 
var CopyWebpackPlugin = require('copy-webpack-plugin') 

module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'eventsource-polyfill', 
    'whatwg-fetch', 
    'webpack-hot-middleware/client', 
    './index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: [ 'react-hot', 'babel' ], 
     exclude: /node_modules/, 
     include: __dirname 
    }, { 
     test: /\.css?$/, 
     loaders: [ 'style', 'raw' ], 
     include: __dirname 
    }, 
     { 
     test: /\.less$/, 
     loaders: ['style', 'css', 'less'], 
     include: __dirname 
     }, 
     { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, 
     { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }] 
    } 
} 

答えて

0

テストで。私のWebPACKファイルのいずれかの

例:

module: { 
loaders: [ 
    // Javascript 
    { test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ }, 
    // Stylesheets 
    { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') }, 
    // Font Definitions 
    { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' }, 
    { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' }, 
    { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' }, 
    { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' }, 
    { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' } 
    ] 
}, 
+0

私はフォントファイル、ビルドで残念ながらなしのファイルのためのあなたの正規表現を試してみました。 。 。それは価値があるもののために私は自分のビルドを行うための素晴らしいスクリプトはありません、単に一般的な 'npm start' – j0hnarch

関連する問題