babel7+webpack4转换jsx出现的问题

下载

这里我是用npm命令下载的，我就不多叙述 了。
下载完package.json如下

可能会跟一些博客上的不同，主要就是因为babel7舍弃了以前的 babel-- 的命名方式，改成了@babel/-

webpack.config.js具体代码如下

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
//创建插件实例对象
const htmlplugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
module.exports = {
    mode : "development",
    plugins:[
        htmlplugin
    ],
    module: {
        rules: [        
            {
                test: /\.js|jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-react']
                    }
                }
            },
        ]
    }
}

presets: [’@babel/preset-react’]这里不要写错了，babel7之前是react，之后就是@babel/preset-react，写错了，会报错，

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react' from '/Users/me/Desktop/reflask' - If you want to resolve "react", use "module:react"

参考的文章，babel7转换jsx

babelrc文件

{
    "presets": ["@babel/preset-env", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

当我运行的时候，页面显示正常的内容了，但是，控制台已就报错 了。

Uncaught Error: Target container is not a DOM element.

此时，只需要将你引用的script放在body之后，即可

这时，程序就可以正常运行，且前端不报错了。
这篇文章仅仅就是我给自己提个醒，很多地方并未做解释，不喜勿喷，如果有错的地方，希望各位大牛可以指出。