初步使用 webpack+react+react-router创建项目 （一）

身处这个 ‘资本寒冬’ 社会的我 也是瑟瑟发抖，所以要抓紧学习，不能被社会淘汰。言归正传，现在前端有四大框架 ,Vue、React、Angular、Jquery，现在熟练掌握的 只有Vue和React、jquery
Vue和React 都有自己的脚手架 例如 vue-cli 和 creat-react-app 很简单 自行百度吧。然后就可以上手写，也不用考虑webpack打包配置的问题，但是现在 webpack已然成为 最流行的 打包工具，所以赶紧 使用webpack自行配置一个醒目吧~~回首掏

1. 生成安装包 package.json

cnpm init

这是 cnpm init 回车之后的车祸现场， 就是一些信息 如果不想填，那就一路狂按回车

2. 下载一些 安装包

–save: 是说你下载的 ‘包’ 在线上可以用到
–save-dev： 是说咱们开发的时候用到，例如 html-webpack-plugin 他就在你打包的时候用一次，线上根本用不到，所以 我们就把这一类的 使用 --save-dev

cnpm install react react-dom react-router-dom --save

这哥三都是写React项目必须要的，后面贴代码的时候会告诉你 他们是干什么的。

cnpm install webpack webpack-cli webpack-dev-server --save-dev

webpack-dev-server: 开启本地服务器

cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-latest babel-preset-react babel-preset-stage-2 babel-plugin-import --save

babel-core: 如果某些代码需要调用babel的API 就需要 babel-core
babel-loader: 将ES6 进行转码
babel-preset-es2015: 用于将ES6 转化成 ES5
babel-preset-latest: ES6 最新转码规则
babel-preset-react: 可以让我们使用 jsx 写法
babel-plugin-import: 允许使用插件

cnpm install sass-loader css-loader style-loader file-loader --save

sass-loader: 将 sass 语法 转化成 css 写法
css-loader: 加载 css 文件 例如 import '…/css/index.css’
style-loader: html引入 css 文件

cnpm install path cross-env html-webpack-plugin --save

path: 指明路径 在 webpack.config.js 中使用
html-webpack-plugin: 生成 html-webpack-plugin 页面
cross-env: 跨平台使用命令

作者由于写注释太多…手卒
OK， 到这里初步使用的包差不多就这些了，你可以记下来每个都是干什么的 多联系几遍，你就看看可以想都不用想的打出来，此乃在别人面前的装X神器 有木有
**

3. 配置 webpack.config.js

1) 引入 所需要的 包

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

剩下所有的 配置都在 module.export = { } 里面， 经常使用的 就 mode、entry、output、module、devServer、plugin
mode: 执行命令 判断是执行本地运行命令还是 打包上线的命令
entry: 配置入口
output: 配置出口
module: 加载文件规则
devServer: 开启本地服务器
plugin: 使用插件

2） 配置 mode

module.exports = {
    mode: process.env.NODE_ENV === 'production' ? 'production':'development',
}

process.env.NODE_ENV 我们会在 package.json 中对他进行赋值，然后在这里 他就可以做出是 本地 还是线上自动区分了

3) 配置 入口

entry: path.resolve(__dirname, './src/main.js'),

4) 配置出口

output: {
    path: path.resolve(__dirname, 'dist'),  // 打包输出路径
    filename: "bundle.js"  // 打包后的名字
},

5) 加载文件规则
/啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 卧槽 手疼…/

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            use: ['babel-loader']
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}

6）. 开启本地服务器

devServer: {
   host: 'localhost',
   port: '8080', // 端口号
   open: true,  // 是否自动开启浏览器
}

7） 插件

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),
    new HtmlWebpackPlugin({
        hash: true,
        template: './index.html'
    })
]

**

4. .babelrc 创建

**
（我饿了…）
它主要用于转码规则 和 使用插件

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": []
}

**

5. 开始 React 的相关创建

**

1） App.js : 在这里实现路由，所有组件都在这里面，我用到谁 谁就加载，就像…他是皇上，今天想翻谁的牌，哪个后宫就要来侍寝…说到这里 我这老脸一红 哈哈哈哈哈

import React from 'react'
import {Route, Switch} from 'react-router-dom'

import Index from './pages/index'
import Home from './pages/home'

const Main = () => (
    <main>
        <Switch>
            <Route exact path="/" component={Index}/>
            <Route path="/home" component={Home}/>
        </Switch>
    </main>
)

class App extends React.Component {
    render() {
        return (
            <div>
                <Main/>
            </div>
        )
    }
}
export default App

2. main.js ： 入口文件，没啥不好理解的

import React from 'react'
import ReactDOM from 'react-dom'
import {HashRouter} from 'react-router-dom'
import App from './App'


ReactDOM.render(<HashRouter>
    <App/>
</HashRouter>, document.getElementById('App'))

3. index.js

import React from 'react'
import '../css/index.css'

class index extends React.Component {
    constructor(props) {
        super(props)
        this.state= {
            name: '首页666'
        }
    }
    changeTohome() {
        this.props.history.push({pathname: `/home/?id=${2}`})
    }
    render() {
        return (
            <div className='getName' onClick={this.changeTohome.bind(this)}>
                {this.state.name}
            </div>
        )
    }
}
export default index

4. home.js

import React from 'react'
import '../css/home.css'

class home extends React.Component {
    constructor(props) {
        super(props)
        this.state= {
            name: 'home'
        }
    }
    render() {
        return (
            <div className='getName'>
                {this.state.name}
            </div>
        )
    }
}
export default home

额 老衲忘了一件重要的事…那就是在 package.json 配置执行命令语句

"scripts": {
    "dev": "cross-env NODE-ENV=development webpack-dev-server --process"
  },

这里的 NODE-ENV=development 就是在 webpack.config.js mode进行赋值，看当前是 develop 还是 production ，
执行命令 cnpm run dev 就OK了

代码我会上传到 github 别担心

算球了 我妈喊我回家吃饭了…明天继续学习 然后更新