当我尝试运行我的Webpack配置时，它失败并出现以下错误：
$ webpack
Hash: 826e21c818de1882d366
Version: webpack 1.13.1
Time: 53ms
[0] ./public/js/react/swap-shop.js 0 bytes [built] [failed]
ERROR in ./public/js/react/swap-shop.js
Module parse failed: /Users/work/Development/group-2/public/js/react/swap-shop.js Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (23:6)
at Parser.pp.raise (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.unexpected (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
at Parser.pp.parseExprAtom (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:333:12)
at Parser.pp.parseExprSubscripts (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
at Parser.pp.parseMaybeUnary (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
at Parser.pp.parseExprOps (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
at Parser.pp.parseMaybeConditional (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
at Parser.pp.parseMaybeAssign (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
at Parser.pp.parseParenAndDistinguishExpression (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:376:28)
at Parser.pp.parseExprAtom (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:307:19)
at Parser.pp.parseExprSubscripts (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
at Parser.pp.parseMaybeUnary (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
at Parser.pp.parseExprOps (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
at Parser.pp.parseMaybeConditional (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
at Parser.pp.parseMaybeAssign (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
at Parser.pp.parseExpression (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:88:19)
at Parser.pp.parseReturnStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1872:26)
at Parser.pp.parseStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1737:19)
at Parser.pp.parseBlock (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2009:21)
at Parser.pp.parseFunctionBody (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:610:22)
at Parser.pp.parseMethod (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:579:8)
at Parser.pp.parseClassMethod (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2155:23)
at Parser.pp.parseClass (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2140:10)
at Parser.pp.parseStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1733:19)
at Parser.pp.parseTopLevel (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
at Parser.parse (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
at Object.parse (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/Users/work/Development/group-2/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/Users/work/Development/group-2/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/work/Development/group-2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
我不确定为什么会发生这种情况，这是我的配置：
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./public/js/react/swap-shop.js",
output: {
path: __dirname + "/dist",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
然后我有我实际尝试捆绑的React组件，这里是swap-shop.js文件
import VehicleList from './components/vehicle-list.js';
class VehicleContainer extends React.Component {
constructor(props) {
super(props);
this.state = { vehicles: [] };
}
componentWillMount() {
// Make a request for vehicle data
axios.get('/api/models')
.then(response => this.setState({ vehicles: response.data }))
.catch(error => console.log(error));
}
render() {
console.log(this.state.vehicles);
return (
<VehicleList vehicles={this.state.vehicles}/>
)
}
};
ReactDOM.render(
<VehicleContainer />,
document.getElementById('swap-shop-range').getElementsByClassName('react-target')[0]
);
然后我有了我的VehicleList组件：
// Vehicle List Componen
import VehicleDetail from './vehicle-detail';
// Create our component
let VEHICLES = [
{make: 'Volkswagen', model: 'Golf', image: 'https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/a4a40021d1661b474e42ad3aa0419d940601b27f.png'}
];
const VehicleList = (props) => {
// Just add props.vehicle to access API data instead of static
const RenderedVehicles = VEHICLES.map(vehicle =>
<VehicleDetail key={vehicle.make} vehicle={vehicle} />
);
return (
<div className="row-flex center-xs">
{RenderedVehicles}
</div>
);
};
// Export our component
export default VehicleList;
最后我的VehicleDetail组件：
// Vehicle Description Component
const VehicleDetail = (props) => {
return (
<div className="col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query">
<div className="vehicle-container">
<img src={props.vehicle.image} />
<h4 className="vehicle-title">
{props.vehicle.make}
<span>{props.vehicle.model}</span>
</h4>
<div className="row-flex">
<div className="col-flex-xs-6 btn-container">
<a href="/offers/citigo-colour-edition" className="learn-more-btn">Learn More</a>
</div>
<div className="col-flex-xs-6 btn-container">
<a href="/offers/citigo-colour-edition/make-enquiry" className="test-drive-btn">Test Drive</a>
</div>
</div>
</div>
</div>
);
};
// Export our component
export default VehicleDetail;
我的React组件层次结构：
public/js/react/
swap-shop.js
components/
vehicle-detail.js
vehicle-list.js
然后我只是将React，ReactDOM和Babel包含在我的页面中，就在包含我的React代码的脚本标记上方。当我将所有组件粘贴到我的实际html页面中并使用一个内联脚本标记时，它们似乎正常工作但是当我尝试将它们与webpack捆绑时，我出于某种原因出现此错误。知道为什么会这样吗？
答案 0 :(得分：0)
你可能需要babel-loader，babel-preset-es2015和babel-preset-react
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./public/js/react/swap-shop.js",
output: {
path: __dirname + "/dist",
filename: "scripts.min.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })]};
了解更多https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html