使用babel解析JSX语法

我们知道，jsx并不是真正的js，是无法正常运行的。 我们通过babel插件，将jsx语法转换成

React.createElement('div', {}, {})

的形式，通过引入我们自己写的react api，就能实现react库的功能了。

在webpack中配置babel

安装babel核心包

npm install --save-dev @babel/core

安装webpack所需要用来支持babel的loader

npm install --save-dev babel-loader

安装babel用来解析es5+语法的preset

npm install --save-dev @babel/preset-env

安装babel用来转换jsx语法的插件

npm install --save-dev @babel/plugin-transform-react-jsx

在webpack.config.js中增加配置

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-transform-react-jsx']
                }
            }
        }
    ]
}

配置完成，启动项目

npm run watch