babel-core升级为@babel/core ,eslint-loader升级为eslint-webpack-plugin, babel-eslint升级为@babel/eslint-parser

过程不详细叙述了,很多报错,经过调试测试,记录下可用版本

先把之前相关的包都卸载,再重装
涉及到的改动文件
package.json

    "@babel/core": "^7.18.6",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "@babel/runtime": "^7.18.6",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "vue-loader": "14.2.4",

.babelrc文件

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "transform-vue-jsx"
  ]
}

.eslintrc.js文件

  parser: '@babel/eslint-parser'

webpack.dev.conf.js

const ESLintPlugin = require('eslint-webpack-plugin');
  plugins: [
  ...
  new ESLintPlugin({
      fix: true, // 启用ESLint自动修复功能
      extensions: ['js', 'jsx'],
      context: resolve('src'), // 文件根目录
      exclude: ['/node_modules/', '/src/icons/index.js'],// 指定要排除的文件/目录
      cache: true //缓存
    })
 ]

你可能感兴趣的:(项目经验,webpack4,webpack,javascript,前端)