babel7+webpack4转换jsx出现的问题

下载

这里我是用npm命令下载的,我就不多叙述 了。
下载完package.json如下
babel7+webpack4转换jsx出现的问题_第1张图片
可能会跟一些博客上的不同,主要就是因为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之后,即可

babel7+webpack4转换jsx出现的问题_第2张图片
这时,程序就可以正常运行,且前端不报错了。
这篇文章仅仅就是我给自己提个醒,很多地方并未做解释,不喜勿喷,如果有错的地方,希望各位大牛可以指出。

你可能感兴趣的:(报错问题)