html引入babel,javascript – 如何使用Babel正确加载.eot和.woff文件？

尝试运行我的项目并得到以下错误(您可能需要适当的加载程序来处理此文件类型.)for .eot,.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. (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$/,'css?sourceMap','sass?sourceMap']},{test: /\.less$/,'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",}

}

有任何想法吗？