.eotファイルと.woffファイルをBabelで正しく読み込むには？

Question

私のプロジェクトを実行しようとすると.eotために、次のエラー（You may need an appropriate loader to handle this file type.）を取得し、.woff、.ttf、および.svgファイル：

他のファイルタイプのために上記のような他の三つのエラーがあります

ERROR in ./src/styles/fonts/nm/icons/nm-icons.svg?aaf8685e87a6901c76c52d0018389547 
Module parse failed: C:\BaseProject\src\styles\fonts\nm\icons\nm-icons.svg?aaf8685e87a6901c76c52d0018389547 Unexpected t 
oken (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (1:0) 
    at Parser.pp$4.raise (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) 
    at Parser.pp.unexpected (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) 
    at Parser.pp$3.parseExprAtom (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12) 
    at Parser.pp$3.parseExprSubscripts (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21) 
    at Parser.pp$3.parseMaybeUnary (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) 
    at Parser.pp$3.parseExprOps (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) 
    at Parser.pp$3.parseMaybeConditional (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) 
    at Parser.pp$3.parseMaybeAssign (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) 
    at Parser.pp$3.parseExpression (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21) 
    at Parser.pp$1.parseStatement (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47) 
    at Parser.pp$1.parseTopLevel (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25) 
    at Parser.parse (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17) 
    at Object.parse (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) 
    at Parser.parse (C:\BaseProject\node_modules\webpack\lib\Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (C:\BaseProject\node_modules\webpack\lib\NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (C:\BaseProject\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
@ ./~/css-loader?sourceMap!./src/styles/main.min.css 6:42409-42482 

。

webpack.config.dev.js：

import webpack from 'webpack'; 
import path from 'path'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
export default { 
    debug: true, 
    devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool 
    noInfo: true, // set to false to see a list of every file being bundled. 
    entry: [ 
    'webpack-hot-middleware/client?reload=true', 
    'babel-polyfill', 
    './src/index' 
    ], 
    target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test 
    output: { 
    path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`. 
    publicPath: 'http://localhost:3000/', // Use absolute paths to avoid the way that URLs are resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev. 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom) 
     __DEV__: true 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin({  // Create HTML file that includes references to bundled CSS and JS. 
     template: 'src/index.ejs', 
     minify: { 
     removeComments: true, 
     collapseWhitespace: true 
     }, 
     inject: true 
    }) 
    ], 
    module: { 
    loaders: [ 
     {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']}, 
     {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, 
     {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: 'file-loader?limit=10000&mimetype=application/octet-stream'}, 
     {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'}, 
     {test: /\.(jpe?g|png|gif)$/i, loaders: ['file']}, 
     {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}, 
     {test: /\.css$/, loaders: ['style', 'css?sourceMap']}, 
     {test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}, 
     {test: /\.less$/, loaders: ['style', 'css?sourceMap', 'less?sourceMap']} 
    ] 
    } 
}; 

.babelrc：

{ 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-1" 
    ], 
    "env": { 
    "development": { 
     "presets": [ 
     "react-hmre" 
     ] 
    } 
    } 
} 

package.json：（削除いくつかここで

が私のファイルです無関係の依存関係）

{ 
    "name": "project", 
    "version": "0.1.0", 
    "description": "", 
    "engines": { 
    "npm": ">=3" 
    }, 
    "scripts": { 
    "preinstall": "node tools/nodeVersionCheck.js", 
    "setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js", 
    "start-message": "babel-node tools/startMessage.js", 
    "prestart": "npm-run-all --parallel start-message remove-dist", 
    "start": "npm-run-all --parallel test:watch open:src lint:watch", 
    "open:src": "babel-node tools/srcServer.js", 
    "open:dist": "babel-node tools/distServer.js", 
    "clean-dist": "npm run remove-dist && mkdir dist", 
    "remove-dist": "rimraf ./dist", 
    "prebuild": "npm run clean-dist && npm run lint && npm run test", 
    "build": "babel-node tools/build.js && npm run open:dist", 
    "open:cover": "npm run test:cover && open coverage/index.html" 
    }, 
    "devDependencies": { 
    "babel-cli": "6.10.1", 
    "babel-core": "6.10.4", 
    "babel-loader": "6.2.4", 
    "babel-plugin-react-display-name": "2.0.0", 
    "babel-polyfill": "6.13.0", 
    "babel-preset-es2015": "6.9.0", 
    "babel-preset-react": "6.11.1", 
    "babel-preset-react-hmre": "1.1.1", 
    "babel-preset-stage-1": "6.5.0", 
    "babel-register": "6.9.0", 
    "extract-text-webpack-plugin": "1.0.1", 
    "file-loader": "0.9.0", 
    "html-webpack-plugin": "2.22.0", 
    "less": "2.7.1", 
    "less-loader": "2.2.3", 
    "node-sass": "3.8.0", 
    "npm-run-all": "2.3.0", 
    "open": "0.0.5", 
    "replace": "0.3.0", 
    "sass-loader": "4.0.0", 
    "style-loader": "0.13.1", 
    "url-loader": "0.5.7", 
    "webpack": "1.13.1", 
    "webpack-dev-middleware": "1.6.1", 
    "webpack-hot-middleware": "2.12.1", 
    } 
} 

Answer 1

- 私は私のeot、woff、ttfを交換して、次の行でsvgローダー：

{test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader"} 

Answer 2

設定したテスト式が、ロードしようとしているリソースと一致しません。シンプルな何かを試してみてください：

解決策を見つけた

loaders: [ 
    {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']}, 
    {test: /\.eot(\?[0-9a-z\-=]+)?$/, loader: 'file'}, 
    {test: /\.woff(2)(\?[0-9a-z\-=]+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"}, 
    {test: /\.ttf(\?[0-9a-z\-=]+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'}, 
    {test: /\.svg(\?[0-9a-z\-=]+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'}, 
    {test: /\.(jpe?g|png|gif)$/i, loaders: ['file']}, 
    {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}, 
    {test: /\.css$/, loaders: ['style', 'css?sourceMap']}, 
    {test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}, 
    {test: /\.less$/, loaders: ['style', 'css?sourceMap', 'less?sourceMap']} 
]