javascript - Webpack意外 token ( react )可能需要加载程序-已经有一个

所以我得到这个错误：


  ./web/index.js模块解析失败：
  C：\ git \ personal \ blog \ web \ index.js意外令牌（17：4）您可能需要
  适当的加载程序来处理此文件类型。语法错误：
  意外令牌（17：4）
      在Parser.pp $ 4.raise（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2221：15）
      在Parser.pp。意外（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：603：10）
      在Parser.pp $ 3.parseExprAtom（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1822：12）
      在Parser.pp $ 3.parseExprSubscripts（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1715：21）


它指的是：

1:  import 'babel-polyfill';
2:  import React from 'react';
3:  import {render} from 'react-dom';
4:  import {Provider} from 'react-redux';
5:  import configureStore from './store/configureStore';
6:  import {Router, browserHistory} from 'react-router';
7:  import routes from './routes';
8:  import './styles/styles.css';
9:  import './css/font-awesome.min.css';
10: import es6Promise from 'es6-promise';
11:
12: es6Promise.polyfill();
13:
14: const store = configureStore();
15:
16: render(
17:    <Provider store={store}>
18:         <Router history={browserHistory} routes={routes} />
19:     </Provider>,
20:     document.getElementById('app')
21: );

这是我的package.json：

{
  "main": "index.js",
  "scripts": {
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src": "babel-node server/index.js",
    "lint": "node_modules/.bin/esw webpack.config.* web server",
    "lint:watch": "npm run lint -- --watch",
    "test": "mocha --report progress tests/testSetup.js \"tests/**/*.spec.js\"",
    "test:watch": "npm run test -- --watch"
  },
  "dependencies": {
    "aurelia-fetch-client": "^1.1.0",
    "babel-polyfill": "^6.16.0",
    "bcrypt-nodejs": "0.0.3",
    "bootstrap": "^3.3.7",
    "cookie-parser": "^1.4.3",
    "es6-promise": "^4.0.5",
    "express-session": "^1.14.2",
    "fontawesome": "^4.5.0",
    "isomorphic-fetch": "^2.2.1",
    "moment": "^2.17.0",
    "numeral": "^2.0.3",
    "react": "15.0.2",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "react-select2-wrapper": "^1.0.3",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "toastr": "2.1.2",
    "underscore": "1.8.3"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-plugin-react-display-name": "^2.0.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-register": "^6.18.0",
    "bluebird": "^3.4.6",
    "body-parser": "^1.15.2",
    "colors": "^1.1.2",
    "compression": "^1.6.2",
    "cross-env": "^3.1.3",
    "css-loader": "^0.25.0",
    "elasticsearch": "^12.0.1",
    "enzyme": "^2.5.1",
    "eslint": "^3.9.1",
    "eslint-plugin-import": "^2.0.1",
    "eslint-plugin-react": "^6.5.0",
    "eslint-watch": "^2.1.14",
    "eventsource-polyfill": "^0.9.6",
    "expect": "^1.20.2",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "jsdom": "^9.8.3",
    "mocha": "^3.1.2",
    "nock": "^9.0.2",
    "npm-run-all": "^3.1.1",
    "open": "0.0.5",
    "react-addons-test-utils": "^15.3.2",
    "redux-immutable-state-invariant": "^1.2.4",
    "redux-mock-store": "^1.2.1",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-hot-middleware": "^2.13.1"
  }
}

我使用的命令是npm start -s

webpack.config.js：

import webpack from 'webpack';
import path from 'path';

export default {
    debug: true,
    devtool: 'inline-source-map',
    noInfo: false,
    entry: {
        app: [
            'eventsource-polyfill', // hot reloading with IE
            'webpack-hot-middleware/client?reload=true', // reloads the page if hot module reloading fails
            'isomorphic-fetch',
            path.resolve(__dirname, './web/index')
        ],
        login: [
            'eventsource-polyfill', // hot reloading with IE
            'webpack-hot-middleware/client?reload=true', // reloads the page if hot module reloading fails
            'isomorphic-fetch',
            path.resolve(__dirname, './web/login')
        ]
    },
    target: 'web',
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: '[name].bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, './web')
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
            {test: /(\.css)$/, loaders: ['style', 'css']},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=100000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=100000&mimetype=image/svg+xml'},
            {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" }
        ]
    }
};

.babelrc：

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

最佳答案

搞定了：

    module: {
        loaders: [
            {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
            {test: /(\.css)$/, loaders: ['style', 'css']},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=100000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=100000&mimetype=image/svg+xml'},
            {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" }
        ]
    }
};

我做的第一行path.join(__dirname, 'src')

需要做path.join(__dirname, 'web')

关于javascript - Webpack意外 token ( react )可能需要加载程序-已经有一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42203977/