react组件分离和省略后缀名

组件分离

每一个组件都可以单独分离为一个.jsx文件
.jsx的配置

import React from 'react'

export default function Hello(props) { // 将组件暴露给外面可以使用
    console.log(props);
    return <div>hello ,这是一个组件</div>
}
或
function Hello(props) {
    console.log(props);
    return <div>hello ,这是一个组件</div>
}
export default Hello
...

index.js(入口文件的配置)

...

import Hello from './components/Hello.jsx'

...

省略后缀名

index.js(入口文件的配置)

...

import Hello from './components/Hello'

...

webpack.config.js的配置

module.exports = {
    mode: 'development', // development production
    plugins:[
        htmlPlugin
    ],
    module:{ //所有第三方模块的配置
        rules:[ //第三方匹配规则
            {test: /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    },
    resolve:{
        extensions:['.js','.jsx','.json'] //表示这几种文件的后缀名可以省略，按照从前到后的方式来进行补全
    }
};