webpack+babel+react+antd技术栈的基础配置

　　　　　　　　webpack+babel+react+antd技术栈的基础配置

　　前段时间使用webpack+babel+react+antd做了一套后台管理系统，刚开始被一大堆的新知识压的喘不过气来，压力挺大的。还在一步步走来，学习了很多。那时候还不会配置，直接从网上下了别人配置好的可以跑的。之后特意花了一段时间好好研究了下webpack，后面可以直接动手做一些基本的配置。webpack很强大，还有许多要学习的地方。

　　最近学习了挺多知识，堆积着没有记录到博客。找机会慢慢写出，因工作需要，最近干了后端，毕竟是前端出身，前端的知识也没有拉下，（开玩笑的说：没有忘本！），还会继续学习。

　　下面就分享下我的配置过程

　　demo项目目录

　　

　　首先，创建项目目录并且进入项目

mkdir reactDemo && cd reactDemo

　　新建一个package.json文件，内容如下:

{
  "name": "webpack-Demo",  //项目名称
  "version": "0.0.1",  //版本号
  "description": "webpack-Demo",  //项目描述
  "keywords": [     //关键字
    "demo",
    "webpack"
  ],
  "author": "pmx",   //作者
  "scripts": {  //定义脚本命令 如dev  启动为npm run dev
    "dev": "webpack-dev-server --progress --config ./webpack.config.js"
  },
  "devDependencies": {  //开发过程中依赖的包
    "antd": "^2.13.10",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-import": "^1.6.2",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "html-webpack-plugin": "^2.26.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

　　从上到下介绍下所使用的依赖包： "antd"是蚂蚁金服开发的一个致力于提升『用户』和『设计者』使用体验的中台设计语言，采用 React封装了一套 Ant Design (官网)的组件库。“babel-core”，"babel-loader" 是使用babel必备的两个依赖，再加"babel-preset-es2015"这个规则（规则可以换成其他种），这三个是babel能使用基础。“babel-plugin-import”是用来按需加载 antd 的脚本和样式的。"babel-polyfill"为了使新的ES5,es6新的内置如Promise等，一些API可使用。详细说明  "babel-preset-react"是解析react的规则, "css-loader"，"style-loader"是CSS样式的依赖包。"html-webpack-plugin"可以生成创建html入口文件 (可以不需要)。 "react"，"react-dom" 是react需要的依赖，"webpack"，"webpack-dev-server"是webpack和帮助自动服务的。

　　接着新建webpack.config.js，开始设置配置

 var path = require("path")
 
 var webConfig = {
     entry: "./src/index.jsx",   //入口文件
     output: {
         path: path.resolve(__dirname, "dist"), //打包后的文件路径(真实存在)
         publicPath: "/",
         filename: "bundle.js"    //打包后的文件名(存在于内存中)
     },
     devtool: 'cheap-module-eval-source-map',
     devServer: {
                /*contentBase: './src',  默认以当前目录为根目录，如果加了此属性，就以src文件为根目录 */
                historyApiFallback: true,
                inline: true,
                port: 9001,  //端口9001
     },
     module: {
        loaders: [
            {
                test: /.(js|jsx)$/,
                exclude: '/node_modules/',
                loader: 'babel-loader',
                query:{
                    presets:['es2015','react'],  //使用es2015和react规则解析
                    plugins: [["import", { "libraryName": "antd", "style": "css" }]]   //按需引入antd
                }
            },

            {
                test: /.css$/,
                loader: 'style-loader!css-loader'
            }
        ] 
     }
     
 }
 
 
module.exports = webConfig;        

 index.jsx里面

"use strict"

import React from 'react'
import ReactDOM from 'react-dom'
import  'babel-polyfill'
import App from './App.jsx'
ReactDOM.render(<App />, document.getElementById('app'));

App.jsx里面

import React from 'react'
import {Component} from 'react'
import './index.css'
import { Button } from 'antd';

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            flag: false
        }
    }
    
    getBgColor() {
        this.setState({
            flag: !this.state.flag
        })
    }
    
    render() {
        return (
            <div>
                <h1>hello React</h1>
                <button type="button" onClick={this.getBgColor.bind(this)}>按钮</button>
                <div className={this.state.flag ? 'red' : ''} />
                <Button type="primary">Primary</Button>
                <Button>Default</Button>
                <Button type="dashed">Dashed</Button>
                <Button type="danger">Danger</Button>
            </div>
            
        )
    }
}

export default App

index.css里面

.red {
    background: #f90;
    width: 100px;
    height: 100px;
    border: 5px solid blue;
}

　　最后，使用npm run dev  ，这个项目就跑起来了。需要其他的依赖的，可以自己随便添加。thank  you