组件分离
每一个组件都可以单独分离为一个 .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 的这一层路径
}
}
};