React 学习记录-入门（3） -- webpack的导入

React的玩法提高一些吧，看起来高级一点。

1. webpack的导入

npm run eject

此命令会把 react-scripts 封装的webpack配置全部解压到项目目录。

执行后多出来 config 和 scripts 两个目录 ，参考React 学习记录-入门（1）的开始部分的目录结构

2. script目录

我们再看下package.json的内容 
其他的先不看，先看script部分，变了。原先不是这个样子的

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }

 去看下多出来的目录script，一目了然了。与package.json的script部分一一对应

尝试修改

"start": "node scripts/XXstart.js"

执行npm start， 执行失败。修改文件名start.js改为XXstart.js

执行npm start， 执行成功。好了，所有的都还回去，Script的内容和script目录下的文件名。

3. config目录

绝对路径的使用

原先我们引用组件的时候是这么写的
import Component from '../../../../Component '
这是用相对路径引用的，是不是很麻烦？

修改webpack.config.js，追加内容如下

'@': path.resolve('src')

开始用@来代替相对路径

src\views\login\Login.js

import React, { Component } from 'react';
import {$} from '@/request';
class Login extends Component {
    constructor(props){
		$.get('/alu/hello/1112').then(result=>{
            console.log(result.data)
        });
        super(props);
    }
    render(){
        return(
            <div>
                <span>Login请求数据加载中</span>
            </div>
        )
    }
}

export default Login;

修改src\index.js

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import ReactDOM from 'react-dom';
import App from './App';
import Home from './Home';
import Roster from './Roster';
import Schedule from './Schedule';
import './index.css';
import Login from '@/views/login/Login';

ReactDOM.render(
  <BrowserRouter>
    <Route exact path='/' component={Login}/>
    {/* /roster 和 /roster/:number 都是以 /roster 开头 */}
    <Route path='/roster' component={Roster}/>
    <Route path='/schedule' component={Schedule}/>
  </BrowserRouter>,
  document.getElementById('root')
);

执行看看， npm start

login.js加载成功，更好玩的是请求后台失败的日志也打印到屏幕上了，不错不错。