问题
I have this webpack.config.js
:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
...yet I still get this error:
$ webpack -v Hash: 2a9a40224beb025cb433 Version: webpack 1.10.5 Time: 44ms [0] ./src/admin/client/index.jsx 0 bytes [built] [failed] ERROR in ./src/admin/client/index.jsx Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word You may need an appropriate loader to handle this file type. | import React from 'react'; | import AdminInterface from './components/AdminInterface';
I have:
- Installed
webpack
globally and locally - Installed
babel-loader
,babel-core
, andbabel-runtime
- Installed
babel-loader
globally, just in case
Why the hell is webpack seemingly ignoring babel-loader
? Or does babel-loader
not work with modules?
Update:
It looks like babel
handles the input file just fine. When I run:
./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
...it outputs ES5 as expected. Therefore, it seems to me like somehow webpack
isn't properly loading babel-loader
.
回答1:
This looks like a case of operator error. My webpack.config.js
structure was not correct. Specifically, I needed to put the loader details inside of a module
section:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
回答2:
I fixed the same problem by including the es2015 and react presets and then adding them to the webpack.config.js file.
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
as explained in this post: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
my full webpack.config.js file:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
回答3:
What is the version of your babel?If babel version is up to 6+.You need to identify the preset 'es2015' and 'react' like this
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
Don't forget to install these modules:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
来源:https://stackoverflow.com/questions/31799558/webpack-with-babel-loader-not-recognizing-import-keyword