第一步: 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
搞定!