Vue入门8、vue脚手架创建项目的打包+Rule can only have one resource source (provided resource and test + include)
Vue入门8、vue脚手架创建项目的打包之前看教程一直以为vue打包需要webpack命令来打包,但是今天经过和前端的沟通后知道,其实脚手架创建的项目是内置了webpack的,我们可以不用下载webpack-cli来打包项目npm run build直接使用上面的这个命令即可打包成功,打包完成后会生成一个dist文件夹...
·
Vue入门8、vue脚手架创建项目的打包+Rule can only have one resource source (provided resource and test + include)
之前看教程一直以为vue打包需要webpack命令来打包,但是今天经过和前端的沟通后知道,其实脚手架创建的项目是内置了webpack的,我们可以不用下载webpack-cli来打包项目
项目打包
npm run build
直接使用上面的这个命令即可打包成功,打包完成后会生成一个dist文件夹
Rule can only have one resource source (provided resource and test + include)
如果再vuecli创建的项目中自己安装过webpack和webpack-cli的话,可能会在启动的时候报错
INFO Starting development server...
ERROR Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "/Users/zc/VueProjects/new/node_modules/cache-loader/dist/cjs.js",
"options": {
"cacheDirectory": "/Users/zc/VueProjects/new/node_modules/.cache/babel-loader",
"cacheIdentifier": "7906b429"
},
"ident": "clonedRuleSet-38[0].rules[0].use[0]"
},
{
"loader": "/Users/zc/VueProjects/new/node_modules/babel-loader/lib/index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
这是因为webpack的版本不对,但是什么版本是对的呢
我们先把webpack卸载了
npm uninstall webpack
再次启动项目,会报错
INFO Starting development server...
ERROR Error: Cannot find module 'webpack'
Require stack:
- /Users/zc/VueProjects/new/node_modules/webpack-dev-server/lib/Server.js
- /Users/zc/VueProjects/new/node_modules/@vue/cli-service/lib/commands/serve.js
- /Users/zc/VueProjects/new/node_modules/@vue/cli-service/lib/Service.js
- /Users/zc/VueProjects/new/node_modules/@vue/cli-service/bin/vue-cli-service.js
Error: Cannot find module 'webpack'
Require stack:
- /Users/zc/VueProjects/new/node_modules/webpack-dev-server/lib/Server.js
- /Users/zc/VueProjects/new/node_modules/@vue/cli-service/lib/commands/serve.js
- /Users/zc/VueProjects/new/node_modules/@vue/cli-service/lib/Service.js
- /Users/zc/VueProjects/new/node_modules/@vue/cli-service/bin/vue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/Users/zc/VueProjects/new/node_modules/webpack-dev-server/lib/Server.js:23:17)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
不要管上面的报错,继续执行
npm install
这个时候也会有这种提示,重点是其中的一句:requires a peer of webpack@^4.0.0 but none is installed
npm WARN @intervolga/optimize-cssnano-plugin@1.0.6 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @soda/friendly-errors-webpack-plugin@1.8.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @vue/preload-webpack-plugin@1.1.2 requires a peer of webpack@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-jsx@5.3.2 requires a peer of acorn@^6.0.0 || ^7.0.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@8.2.2 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN cache-loader@4.1.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN copy-webpack-plugin@5.1.2 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@3.6.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-import-resolver-webpack@0.12.2 requires a peer of webpack@>=1.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-loader@2.2.1 requires a peer of webpack@>=2.0.0 <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN file-loader@4.3.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@3.2.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN mini-css-extract-plugin@0.9.0 requires a peer of webpack@^4.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of webpack@^4.36.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN terser-webpack-plugin@1.4.5 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN thread-loader@2.1.3 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN url-loader@2.3.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-loader@15.9.8 requires a peer of webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-loader@16.5.0 requires a peer of webpack@^4.1.0 || ^5.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.7.3 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.11.2 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
up to date in 4.713s
94 packages are looking for funding
run `npm fund` for details
下面我们按照这个提示来安装webpack
npm install webpack@^4.0.0
再次启动项目即可
更多推荐
已为社区贡献4条内容
所有评论(0)