webpack报错总结

1,015 阅读1分钟

在使用vue + webpack去运行项目的时候, 经常会因为各种webpack报错, 而导致项目无法启动。 很多错误是可以通过通用的办法去解决的。 下面是我总结的不同报错的具体解决办法,可以作为参考。

1. Vue3.0报错error: Unexpected console statement (no-console) 解决办法

在项目的根目录下的 package.json文件中的eslintConfig:{}中的 “rules”: {加入"no-console":“off”}

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

2. Error: Cannot find module 'webpack-cli'--解决方案

原因: 得要全局安装

解决方案: npm install webpack-cli -g

3. webpack 4 执行 webpack hello.js hello.bundle.js 报错

报错:

ERROR in multi ./hello.js hello.bundle.js

Module not found: Error: Can't resolve in 'hello.bundle.js' in 'F:\git\webpack-demo'

@ multi ./hello.js hello.bundle.js

解决方案: webpack 4 之后这个命令已经不行,需要命令行指明output-filename 和 output-path

npx webpack hello.js --output-filename hello.bundle.js --output-path . --mode development