javascript - Webpack 意外 token (React)可能需要加载器 - 已经有一个

Question

所以我得到这个错误:

ERROR in ./web/index.js Module parse failed: C:\git\personal\blog\web\index.js Unexpected token (17:4) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (17:4) at Parser.pp$4.raise (C:\git\personal\blog\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\git\personal\blog\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\git\personal\blog\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12) at 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"]
        }
    }
}

Answer 1

成功了:

    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')