Vue.config.js 无法识别 require('webpack')

Posted 2023-02-22

【中文标题】Vue.config.js 无法识别 require(\'webpack\')

【英文标题】：Vue.config.js could not recognize require('webpack')Vue.config.js 无法识别 require('webpack')

【发布时间】：2022-01-14 03:56:21

【问题描述】：

我通过CLI创建了一个vue3.0 + ts项目，当我添加vue.config.js时，require总是出错

const webpack = require('webpack');
const path = require('path');

错误是

module "d:/learning/vue-3-ts-demo/node_modules/webpack/types"

Require statement not part of import statement`.

我已经安装了 webpack 5.65.0

我的packages.json：

  "name": "vue-3-ts-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  ,
  "devDependencies": 
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "webpack": "^5.65.0"
  

这是一个新的vue项目，有什么问题？

【问题讨论】：

Vue CLI 项目在后台使用 Webpack，因此无需自己安装。但是，您需要使用 Vue CLI 5 才能使用 Webpack 5。您可以使用配置的 configureWebpack 或 chainWebpack 选项配置 Webpack。你为什么要导入webpack？

@tony19。谢谢。我在configureWebpack中使用return new webpack.BannerPlugin(' xxx')，所以我需要定义const webpack = require('webpack');。当我删除webpack包时。当我使用vue-cli-service serve 运行时，出现“找不到模块'webpack'”的错误

@tony19 我发现解决我原来的问题的解决方案是我需要在.eslintrc.js 规则中添加'@typescript-eslint/no-var-requires': 0。但是该项目仍然无法运行，并出现上述评论所说的新错误

@tony19。再次感谢，我安装了 webpack 4.x，它现在可以工作了。（我的 vue lic 也是 4.x）

【参考方案1】：

错误是 模块“d:/learning/vue-3-ts-demo/node_modules/webpack/types”

要求语句不是导入语句的一部分。

对于这个错误，我通过在.eslintrc.js 中添加'@typescript-eslint/no-var-requires': 0 来解决它

rules: 
'@typescript-eslint/no-var-requires': 0

我已经安装了 webpack 5.65.0

由于我的 vue CLI 是 4.5.14，我也将 webpack 版本重新安装为 4.x，终于可以使用了。