webpack+react+antd

安装webpack
1、 安装全局的webpack、webpack-dev-server
cnpm i -g webpack webpack-dev-server
安装完成之后，输入webpack不报错就证明安装上了

2、 项目初始化 npm init

3、 然后安装项目目录下的webpack  进入到项目的文件夹下 
cnpm i webpack webpack-dev-server --save-dev

4、 创建一个src文件夹（作为我们源码的文件夹）
在src下创建app.js作为入口文件
app.js代码
var Hello=require("./components/hello.js");
document.getElementById('app').appendChild(Hello);
然后在src下面创建components文件夹
在components文件夹下创建Hello.js
Hello.js代码




创建一个build文件夹（作为我们打包之后的文件夹）//项目开发完成之后，只需要打包这个文件就可以上线了
在build下创建index.html作为入口文件

5、使用webpack编译
命令：webpack 路径/入口文件 路径/出口文件
webpack src/app.js build/bundle.js //这时候就会生成一个bundle.js文件

然后在index.html中引入bundle.js，用浏览器打开index.html文件就可以看到页面了

以后你上线的时候只需要把bundle.js这个文件考出来就可以了，我们写的所有的代码都在这里面

6、但是每次更改页面之后都需要从新webpack打包一次，会很不方便
1.编写webpack配置文件
1.创建一个wenpack.config.js文件
2.配置
module.exports = {
entry: __dirname+"/src/app.js", // 入口文件路径
output: {
path:__dirname,"/build"), //打包的文件放到dist这个文件夹中
filename:'bundle.js'
}
}

__dirname：nodejs中配置路径的方法
3.然后在命令行执行webpack命令就可以打包便宜一次bundle.js文件
"scripts": {
"start": "webpack "
},
//执行npm start就可以打包生成bundle文件


7、创建webpack服务器（webpack的服务器是基于nodejs）
上面第三点已经安装过了，webpack-dev-server
执行webpack-dev-server    开启服务器后，就可以访问默认的localhost:8080端口就可以了

8、在package.json文件中，配置快捷键
"scripts": {
"start": "webpack "
"build": "webpack-dev-server --content-base build --inline --hot --color --port 8081"//执行npm run build就可以开启服务器了
}, //开启服务器 //指定访问的根目录是build
 
执行npm start 打包，会生成一个bundle.js
执行npm run build（不会自动生成bundle.js文件，但是他会有一个虚拟的类似bundle.js的文件）
-----------------------------------------------------------
9、 Loaders的配置：（这个是webpack里面的编译器，把很多浏览器不识别的编译成浏览器识别的，例如jsx的babel）
loader是webpack可以通过配置脚本，或者外部依赖来执行一些功能
1、在webpack.config.js中来配置
1、test:是一个匹配loader要做操作的文件的一个正则表达式
2、loader：loader要执行的任务的名字（必须有）
3、query:为loader提供一些外部的选项配置
2、json格式的数据转化成js的对象
1、安装一个json的loader
1.npm i json-loader -D
2.配置：需要在webpack.config.js文件中loader配置
3、创建一个json格式的数据文件
module:{
loaders:[
//配置json格式的转换
{
test:/\.json$/,
loader:"json"
}
]
}
3、创建json文件
4、执行
-------------------------------------------------------
10、babel(es6语法的解析器---把es6语法编译成es6，jsx语法也可以用它来便宜，因为很多浏览器还不支持es6的语法)

babel的安装
1、安装依赖包
cnpm i i -D babel-core babel-loader babel-preset-es2015 babel-preset-react(一次性全部安装)
前两个是loader一起用的   转义es6的 转义react的
2、配置webpack.config.js
{
test:/\.js$/,
    exclude:"node_modules", //这一步有问题，webpack3.0的原因，改成exclude:/node_modules/,
loader:"babel-loader",
    query:{
presets:["es2015","react"] //本来babel转义es5，但是不止让他转义es5，还有转义react
   }
}
3、搭建react的环境
安装cnpm i -S react react-dom
4、修改hello.js文件和app.js
hello.js
import React from "react"
export default class Hello extends React.Components{
render(){
return(
<div>我是hello的信息</div>
)
}
}
app.js
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./components/hello.js";


class App extends React.Component{
  render(){
return (
  <div>
<Hello/>
  </div>
)
  };
}
ReactDOM.render(<App/>,document.getElementById("app"))
以上需要主要es6语法和react的写法
-------------------------------------------------------------------
10、css样式的写法
cnpm i css-loader/style-loader --save-dev
{
test:/\.css$/,
loader:"style-loader!css-loader"
}
引入css样式    import "./hello.css"

11、图片
webpack提供了图片的处理方案
安装  cnpm i --save-dev file-loader url-loader
配置
{
test:/\.(png|jpg|gif)$/,
loader:"url-loader?limit=8129" //当图片小于8129的时候，会被编译成base64格式
}
-------------------------------------------------------------------------


antd的使用
i、先下载 cnpm i antd --S
2、加载样式 import 'antd/dist/antd.css'; //在app.js入口文件中引入就可以全局使用了
3、引入组件 import { Button, Radio, Icon } from 'antd'; //使用什么就在{ }中引入就行