【发布时间】：2016-08-15 10:59:49
【问题描述】：
我很困惑为什么我的 webpack 配置似乎无法解析 jsx 文件。 On Github 我的项目：
.eslintrc
.babelrc
.gitignore
package.json
dist/
spec/
node_modules/
src/
- index.html
- index.jsx
- components/
- - Hello.jsx
- - App.jsx
tools/
- webpack.config.js
- .jscrc
我的标准输出：
> sensible-react-starter@1.0.0 build /Users/Trav/Projects/Templates/sensible-react-starter
> webpack ./src/index.jsx ./dist/index_bundle.js
Hash: deac71a9c994d8034988
Version: webpack 1.13.0
Time: 41ms
[0] ./src/index.jsx 0 bytes [built] [failed]
ERROR in ./src/index.jsx
Module parse failed: /Users/Trav/Projects/Templates/sensible-react-starter/src/index.jsx Unexpected token (8:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:2)
at Parser.pp.raise (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
at Parser.pp.unexpected (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:1483:8)
at Parser.pp.parseExprAtom (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:330:12)
at Parser.pp.parseExprSubscripts (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:225:19)
at Parser.pp.parseMaybeUnary (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:204:17)
at Parser.pp.parseExprOps (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:151:19)
at Parser.pp.parseMaybeConditional (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:133:19)
at Parser.pp.parseMaybeAssign (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:110:19)
at Parser.pp.parseExprList (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:657:23)
at Parser.pp.parseSubscripts (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:249:29)
at Parser.pp.parseExprSubscripts (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:15)
at Parser.pp.parseMaybeUnary (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:204:17)
at Parser.pp.parseExprOps (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:151:19)
at Parser.pp.parseMaybeConditional (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:133:19)
at Parser.pp.parseMaybeAssign (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:110:19)
at Parser.pp.parseExpression (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:86:19)
at Parser.pp.parseStatement (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:1753:23)
at Parser.pp.parseTopLevel (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:1648:21)
at Parser.parse (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:1616:17)
at Object.parse (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
at Parser.parse (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/Trav/Projects/Templates/sensible-react-starter/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/Trav/Projects/Templates/sensible-react-starter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/Trav/Projects/Templates/sensible-react-starter/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)
我的 package.json：
{
"name": "sensible-react-starter",
"version": "1.0.0",
"description": "A sensible starter kit for react applications: React, ES6, and much more",
"main": "index.js",
"scripts": {
"test": "echo 'no test-runner found' && exit(1)",
"build": "webpack ./src/index.jsx ./dist/index_bundle.js",
"start": "webpack-dev-server --content-base dist"
},
"repository": {
"type": "git",
"url": "https://www.github.com/Travmatth/sensible-react-starter"
},
"author": "Travis Matthews",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"html-webpack-plugin": "^2.16.0",
"pug": "^2.0.0-alpha6",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1"
}
}
我的.babelrc：
{
"presets": [
"es2015",
"stage-0",
"react"
]
}
我的 webpack.config.js：
/**
* http://survivejs.com/webpack_react/developing_with_webpack/
* https://github.com/Travmatth/webpack-express-boilerplate/blob/master/webpack.config.js
*/
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '../src/index.html',
filename: 'index.html',
inject: 'body'
});
// To execute:
// $ webpack ./src/index.js ./dist/bundle.js
module.exports = {
// What does this do?
//devtool: 'eval-source-map'
entry: [
path.join(__dirname, '../src')
],
// Add resolve.extensions
// '' is needed to allow imports without an extension
// Note the .'s before extensions as it will fail to match without
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: path.join(__dirname, '../dist/'),
filename: 'index_bundle.js',
publicPath: './dist/'
},
plugins: [new HtmlWebpackPluginConfig],
module: {
loaders: [
{ // Configure css
test: /\.css$/,
loaders: ['style', 'css'],
// include: path.join(__dirname, '../src/')
},
{ // Configure jsx - accepts .js as well thx to RegExp
test: /\.jsx?$/,
// Parse only app files!
// Without this, would go through entire app
include: path.join(__dirname, '../src/'),
// exclude: /node_modules/
loader: 'babel-loader',
// Enable caching for improved performance during dev
// Uses default directory by default
query: {
presets: ['react', 'stage-0', 'es2015']
},
}
],
}
}
我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title> sensible-react-starter </title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<meta name="description" description="description">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
<body>
<h1>Is this working?</h1>
<div id="app"></div>
<script src="./index_bundle.js"></script>
</body>
我的 index.jsx：
import './main.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
console.log('index.jsx entered');
ReactDOM.render(
<App/>,
document.getElementById('app')
);
我的 Hello.jsx：
import React from 'react';
console.log('Hello.jsx entered')
export default () => <p>Learn Webpack</p>;
在我所有的谷歌搜索/堆栈溢出中，我能找到的唯一相关的构建失败是由于没有正确包含/实现反应——如果我的代码是这种情况，我看不到在哪里。
【问题讨论】：
-
你能粘贴你的目录结构吗？
tree可以工作。 -
@bebraw 添加了一个骨架并链接了 github，如果有帮助的话
标签： reactjs ecmascript-6 webpack babeljs