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

【问题标题】：react project setup - npm run webpack issue反应项目设置 - npm 运行 webpack 问题
【发布时间】：2018-09-11 03:44:39
【问题描述】：

我正在关注 http://ccoenraets.github.io/es6-tutorial-react/setup/ 进行 React 项目设置。最后，运行后出现此错误

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

【问题讨论】：

标签： linux reactjs npm webpack installation

【解决方案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'
 };

【讨论】：