webpack解析ex6 react语法1

1.安装npm i @babel/core @babel/preset-env babel-loader -D

2.创建.babelrc文件 , 进行配置

{

"presets":[

"@babel/preset-env",

"@babel/preset-react"

]

}

3.webpack.config.js进行配置.

const path = require('path');

module.exports = {

entry:{

index: './src/index.js',

hello: './src/hello.js'

},

output:{

path:path.join(__dirname, '/dist'),

filename:'[name].js'

},

mode:'production',

module:{

rules:[

{

test:/\.js$/,

use:'babel-loader'

}

]

}

}

4.写安装react react-dom

    npm i react react-dom -D;

5.创建index.js, 写入react

    'use strict';

import React from 'react';

import ReactDOM from 'react-dom'

class Search extends React.Component {

    render() {

        return

            解析react语法

       

;

    }

}

```

ReactDOM.render(

   

,

    document.getElementById('root')

);

```

#.运行npm run build即可打包成功