Babil ile .eot ve .woff dosyaları nasıl düzgün yüklenir?

Question

projemi çalıştırmak çalışıyor ve .eot için aşağıdaki hatayı (You may need an appropriate loader to handle this file type.) almak .woff, .ttf ve .svg dosyaları:

diğer dosya türleri için yukarıdaki gibi üç diğer hatalar var

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: Burada

benim dosyalardır

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: (kaldırıldı bazı alakasız bağımlılıklar

{ 
    "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", 
    } 
} 

Herhangi bir fikir?

Answer 1

Bulunan çözüm - Ben şu satırla benim eot, woff, ttf ve svg yükleyiciler yerini: daha basit bir şeyle deneyin

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

Answer 2

Yapılandırılmış test ifadeleriniz, yüklemeye çalıştığınız kaynaklarla eşleşmiyor.

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']} 
]