webstorm上配置nodejs并使用npm安装webpack实现第一个 React的App

第一步： nodejs官网下载安装包并且安装，如果出现错误就直接重装。
第二步 ：

这里如果直接选OK保存会还是无法保存，要点击右上角蓝色的create configuration，然后进入下面的界面再保存就可以了。这时才会出现常见的绿色倒三角按钮。

第三步： 直接在IDE中写console.log("hello world")，点击绿色倒三角按钮执行就可以直接在控制台看到输出，就成功啦。

第四步： 用npm安装webpack。

注意：一定要先换源再安装
换源：npm config set registry https://registry.npm.taobao.org
查看源：npm config get registry

然后跟着这个来：

https://segmentfault.com/a/1190000013366190

注意最开始的两条命令是过时的：

npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react --save-dev

第一条会报错过时npm WARN deprecated [email protected]: Thanks for using Babel: we recommend using babel-preset-env now:解决办法参考：

https://zhuanlan.zhihu.com/p/29506685

首先卸载原来的 preset，然后安装 babel-preset-env：

npm uninstall --save-dev babel-preset-es2015
npm install --save-dev babel-preset-env@next

接下来将你的 .babelrc 文件中“es2015”修改“env”：

{
  "presets": [ "env" ],
  ...
}

用了之后在 npm run start 时会报错：

D:\nodejsdemo\node_modules\webpack\lib\webpack.js:189
throw new RemovedPluginError(errorMessage);
^
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
at Object.get [as CommonsChunkPlugin] (D:\nodejsdemo\node_modules\webpack\lib\webpack.js:189:10)
at Object. (D:\nodejsdemo\webpack.config.js:6:42)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object. (D:\nodejsdemo\server.js:3:14)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxcc\AppData\Roaming\npm-cache_logs\2020-03-16T16_52_39_507Z-debug.log

核心问题是这句：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
参考解决链接：

https://blog.csdn.net/qq_16559905/article/details/79404173

解决办法是webpack.config.js中去除 new webpack.optimize.CommonsChunkPlugin，在exports中加入：

optimization: {
    runtimeChunk: {
        name: "manifest"
    },
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendor",
                chunks: "all"
            }
        }
    }
},

接下来遇到的问题是：

Error: Cannot find module 'html-webpack-plugin'

那就安装缺少的这个模块：

npm i --save-dev html-webpack-plugin

然后就成功啦！

但是此时我依旧无法在本地网站上显示，遂跟进另一个教程。跳过前面配置环境的片段，从4.5开始。

https://www.cnblogs.com/chengxs/p/6252572.html

遇到问题Error: Cannot find module 'webpack-cli'
参考链接：

https://blog.csdn.net/qq_33323251/article/details/80453692

解决代码：npm install webpack-cli -g

接下来报错：

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 { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unk
nownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
-> Options affecting the normal modules (NormalModuleFactory).

发现应该是版本问题：

https://segmentfault.com/q/1010000014271365
https://segmentfault.com/a/1190000014297851

接下来跟着这个做！
解决办法：参考这个更改moudle

const path =require('path');   
module.exports = {  
  entry: path.resolve(__dirname, 'index.js'),  
  output: {  
    path: path.resolve(__dirname, ''),  
    filename: "bundle.js"  
  },  
  mode: 'development',
  module: {  
    rules: [  
      {  
        test:  /\.js$/,   
        exclude: /node_modules/,  
        loader: "babel-loader",  
        options: {  
          presets: ["es2015","react"]   
        }  
      }  
    ]  
  }  
}; 

然后出现问题：

Insufficient number of arguments or no entry found.
Alternatively, run ‘webpack(-cli) --help’ for usage info.
Hash: dc84763d44eaf599f6fe
Version: webpack 4.42.0
Time: 43ms
Built at: 2020-03-17 15:26:15
ERROR in Entry module not found: Error: Can’t resolve ‘babel-loader’ in ‘D:\nodejsdemo’

因为下面写者无法找到babel-loader，我就跟着那个步骤重新安装了一遍编译工具babel

npm install babel-preset-env babel-preset-react babel-loader --save-dev

然后依旧出现了大面积的报错：

[./index.js] 3.13 KiB {main} [not cacheable] [built] [failed] [1 error]
ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module ‘@babel/core’
Require stack:

• D:\nodejsdemo\node_modules\babel-loader\lib\index.js
• D:\nodejsdemo\node_modules\loader-runner\lib\loadLoader.js
• D:\nodejsdemo\node_modules\loader-runner\lib\LoaderRunner.js
• D:\nodejsdemo\node_modules\webpack\lib\NormalModule.js
• D:\nodejsdemo\node_modules\webpack\lib\NormalModuleFactory.js
• D:\nodejsdemo\node_modules\webpack\lib\Compiler.js
• D:\nodejsdemo\node_modules\webpack\lib\webpack.js
• D:\nodejsdemo\node_modules\webpack-cli\bin\utils\validate-options.js
• D:\nodejsdemo\node_modules\webpack-cli\bin\utils\convert-argv.js
• D:\nodejsdemo\node_modules\webpack-cli\bin\cli.js
• D:\nodejsdemo\node_modules\webpack\bin\webpack.js babel-loader@8 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use
  Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’.
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
  at Function.Module._load (internal/modules/cjs/loader.js:864:27)
  at Module.require (internal/modules/cjs/loader.js:1044:19)
  at require (D:\nodejsdemo\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
  at Object. (D:\nodejsdemo\node_modules\babel-loader\lib\index.js:10:11)
  at Module._compile (D:\nodejsdemo\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
  at Object.Module._extensions…js (internal/modules/cjs/loader.js:1178:10)
  at Module.load (internal/modules/cjs/loader.js:1002:32)
  at Function.Module._load (internal/modules/cjs/loader.js:901:14)
  at Module.require (internal/modules/cjs/loader.js:1044:19)
  at require (D:\nodejsdemo\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
  at loadLoader (D:\nodejsdemo\node_modules\loader-runner\lib\loadLoader.js:18:17)
  at iteratePitchingLoaders (D:\nodejsdemo\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
  at runLoaders (D:\nodejsdemo\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
  at NormalModule.doBuild (D:\nodejsdemo\node_modules\webpack\lib\NormalModule.js:295:3)
  at NormalModule.build (D:\nodejsdemo\node_modules\webpack\lib\NormalModule.js:446:15)
  at Compilation.buildModule (D:\nodejsdemo\node_modules\webpack\lib\Compilation.js:739:10)
  at D:\nodejsdemo\node_modules\webpack\lib\Compilation.js:1111:12
  at D:\nodejsdemo\node_modules\webpack\lib\NormalModuleFactory.js:409:6
  at D:\nodejsdemo\node_modules\webpack\lib\NormalModuleFactory.js:155:13
  at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (D:\nodejsdemo\node_modules\tapable\lib\HookCodeFactory.js:33:10),
  :4:1)
  at AsyncSeriesWaterfallHook.lazyCompileHook (D:\nodejsdemo\node_modules\tapable\lib\Hook.js:154:20)
  at D:\nodejsdemo\node_modules\webpack\lib\NormalModuleFactory.js:138:29
  at D:\nodejsdemo\node_modules\webpack\lib\NormalModuleFactory.js:346:9
  at processTicksAndRejections (internal/process/task_queues.js:79:11)

核心应该是这句：

babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

解决办法：

https://segmentfault.com/a/1190000016458913

理解一下babel：

https://shenbao.github.io/ishehui/html/React/Babel%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html

babel升级小助手

https://gitissue.com/issues/5c18daeb2d508f5dc897d206

一个应用的网址

https://juejin.im/post/5b87cab1e51d4538ac05dc54

找到了让babel可以自动更新的方式：

npx babel-upgrade

然后使用npm start
最开始会说 missing script: start,这很正常，因为json的scripts里面是没有start这个命令的。加入start:

  "scripts": {
    "webpack": "webpack",
    "start": "webpack-dev-server",
    "dev": "npm run webpack -- --mode development --watch",
    "build": "npm run webpack -- --mode production"
  },

依旧有错误，核心是：

Error: Cannot find module ‘babel-preset-env’ from ‘D:\nodejsdemo’

感觉还是版本的问题，想了下复制model的时候有个选项，这个是之前在.eslintrc文件中改过的，删掉，问题解决。

 options: {  
          presets: ["es2015","react"]   
        }  

最后使用npm start成功啦！

总结： 基本上可以根据这个网址的步骤来！
但是因为babel的版本问题，可能会导致一些错误，解决办法是.babelrc里面改成：

{
  "presets": [
    "@babel/preset-env"
  ]
}

并且升级babel：

npx babel-upgrade

搞定！