Vue入门8、vue脚手架创建项目的打包+Rule can only have one resource source (provided resource and test + include)

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

再次启动项目即可