vue 项目中使用 jsx webpack 配置支持 jsx 文件

vue + webpack 项目中想要使用 jsx文件，
需要对webpack 配置做一下调整
安装 babel 插件

npm install @babel/preset-env @babel/preset-react --save-dev
npm install @vue/babel-plugin-jsx -D

rules 规则 中对.js 这一项，添加一项.jsx

{
  test:/\.(js|jsx)$/,
  exclude:/node_modules/,
  use:{
    loader:'babel-loader',
    options:{
      presets:['@babel/preset-env','@babel/preset-react'],
    }
  }
}

在引入的时候配置无需添加.jsx 扩展名
在extensions中添加.jsx 扩展名

// 配置文件扩展名，引入的时候可以不需要加后缀名了
extensions: [ '*', '.js', 'jsx', '.ts', '.vue', '.json']

在 babel 配置中插件添加一行

{
  "plugins": ["@vue/babel-plugin-jsx"]
}