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 (入口文件的配置)

写法1
import Hello from './components/Hello'
写法2
//这里的 @ 符号 表示 项目根目录中的src 这一层目录
//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' ], //表示这几种文件的后缀名可以省略，按照从前到后的方式来进行补全
        alias: {//表示别名
            '@' : path.join(__dirname,'./src') //这样，@ 就表示 项目根目录中src 的这一层路径
        }
}
};