Webpack意外的令牌（React）可能需要加载器 – 已经有一个
所以我得到这个错误：
./web/index.js中的错误模块parsing失败：C：\ git \ personal \ blog \ web \ index.js意外的标记（17：4）您可能需要一个适当的加载器来处理此文件types。 在Parser.pp.unexpected上的语法错误：意外的标记（17：4）Parser.pp $ 4.raise（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2221：15） （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 （C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1715：21）在\ Parser.pp $ 3.parseExprSubscripts \ acorn \ dist \ acorn.js：1822：12）
它指的是：
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')