反应项目设置 - npm 运行 webpack 问题

Question

我正在按照 http://ccoenraets.github.io/es6-tutorial-react/setup/进行反应项目设置。最后，我在运行后收到此错误

npm run webpack

我得到的错误 -

npm run webpack
> project-newborn@1.0.0 webpack /home/rishi/Desktop/project-newborn
> webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! Linux 4.15.0-34-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "webpack"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! project-newborn@1.0.0 webpack: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the project-newborn@1.0.0 webpack script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the project-newborn package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs project-newborn
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls project-newborn
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /home/rishi/Desktop/project-newborn/npm-debug.log

Answer 1

使用Webpack 4 时，必须使用rules而不是loaders并且最好使用use而不是loader。

var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './js/app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
},
},
],
}
]
},
stats: {
colors: true
},
devtool: 'source-map'
};