我很困惑为什么我的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>;
在我所有的谷歌搜索/堆栈溢出中，我能找到的唯一相关的构建失败是由于没有正确包含/实现 - 如果我的代码是这种情况，我看不到在哪里。
答案 0 :(得分：3)
我很确定你没有运行你的webpack配置。
我尝试检查build-crash分支，但它没有上述所有更改。
我已经将package.json复制到了分支代码上，而webpack.config.js又得到了：
TypeError: HtmlWebpackPluginConfig is not a function
at Object.<anonymous> (/home/halkeye/git/sensible-react-starter/tools/webpack.config.js:37:13)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at module.exports (/home/halkeye/git/sensible-react-starter/node_modules/webpack/bin/convert-argv.js:80:13)
at Object.<anonymous> (/home/halkeye/git/sensible-react-starter/node_modules/webpack/bin/webpack.js:39:40)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:136:18)
at node.js:972:3
所以我修理了一些东西。首先，在没有配置的情况下运行webpack，只需在当前目录中查找webpack.config.js（我推荐）。如果失败，您可以使用--config参数提供新路径。
https://gist.github.com/00b5862100b5886206d910a56157d595
$ webpack --config tools/webpack.config.js
Hash: e14e332ded87ce062f10
Version: webpack 1.13.0
Time: 2512ms
Asset Size Chunks Chunk Names
index_bundle.js 686 kB 0 [emitted] main
index.html 474 bytes [emitted]
[0] multi main 28 bytes {0} [built]
+ 166 hidden modules
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
关键是我使用--config运行，并在你的webpack中修复关于HtmlWebpackPluginConfig的拼写错误。
也无法得到你的路径。加入工作正常，保持错误文件找不到（也许是因为我是linux），所以我切换到path.resolve