0
我很困惑，为什么我的webpack配置看起来无法解析jsx文件。 On Github 我的项目：Webpack无法解析jsx
.eslintrc
.babelrc
.gitignore
package.json
dist/
spec/
node_modules/
src/
- index.html
- index.jsx
- components/
- - Hello.jsx
- - App.jsx
tools/
- webpack.config.js
- .jscrc
我的标准输出：
> [email protected] 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>;
在我所有的搜索/堆栈溢出中，唯一相关的构建失败我可以找到是由于反应没有正确包含/实施 - 如果这是我的代码的情况下，我无法看到在哪里。
可以粘贴你的目录结构？一棵“树”会起作用。 –
@bebraw添加了一个框架，并链接到github，如果这有助于任何 – TravMatth