React+webpack

开发工具准备好：npm+webpack+Visual Studio Code(编写工具)

用npm（一个包管理工具，其中有不少基于node的插件，功能极其强大）安装webpack,我们需要node-npm来安装和运行webpack，关于node和npm不懂得同学请百度。
安装和配置：

1.新建文件夹,转到目标文件夹（当然MAC下可以直接按住“花键”拖住文件夹）：

cd 文件夹

2.npm init，创建配置文件pageage.json

npm init

2.打开命令行，运行npm install，会在文件夹下创建（node_modules文件夹）

npm install

3.运行npm install webpack --save-dev
    --save-dev 是你开发时候依赖的东西("devDependencies")，--save 是你发布之后还依赖的东西,很显然webpack是开发时候需要的东西，所以加上--save-dev

npm install webpack

4.可以去了解下webpack，它本身是只能加载js的，所以像我们所需的jsx,css,scss,less,image,video,json等都是需要我们安装加载器，现在大多数浏览器还不支持ES6语法，还需要ES6语法转换成ES5， 七七八八的加起来：

"babel-core":"^6.25.0",//react加载的一些包
"babel-loader":"^7.0.0",
"babel-preset-es2015":"^6.24.1",//转换成es5
"babel-preset-react":"^6.24.1",
"css-loader":"^0.28.4",//css加载器
//该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
"extract-text-webpack-plugin":"^2.1.2",
"file-loader":"^0.11.2",
//它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
"html-webpack-plugin":"^2.28.0",
//处理.json文件
"json-loader":"^0.5.4",
//处理.jsx文件
"jsx-loader":"^0.13.2",
//sass-loader加载器依赖包
"node-sass":"^4.5.3",
//解析react
"react":"^15.5.4",
"react-dom":"^15.5.4",
"react-hot-loader":"^1.3.1",
//解析sass
"sass-loader":"^6.0.5",
//解析style
"style-loader":"^0.18.2",
//url-loader是对file-loader的上层封装，比如webpack中对图片的加载器配置
"url-loader":"^0.5.8",
//模块加载器兼打包工具
"webpack":"^2.6.1"
//一个小型的Node.js Express服务器
"webpack-dev-server":"^2.4.5"

4.在文件夹下创建一个webpack.config.js配置文件

touch webpack.config.js

5.在根目录下创建src文件夹：创建index.html,在body中添加：

6.在pageage.json文件下的“scripts”属性下配置好命令（我在这里会有两个命令，一个打包文件“build”,一个本地服务器“start”，开发用）：

"scripts": {
"test":"echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --hot --quiet",
"build":"webpack --display-modules --display-chunks"
}

7.在webpack.config.js里配置文件

const webpack=require('webpack');
const autoprefixer=require('autoprefixer');
const ExtractTextPlugin=require('extract-text-webpack-plugin');
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const HtmlWebpackPluginConfig=newHtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
inject:'body'
})
module.exports={
entry:['./src/main.js'],
output:{
path:__dirname+"/build",
filename:'bundle.js'
},
module:{
loaders:[{
test:/\.js$/,
loader:'jsx-loader?harmony'
}, {
test:/\.jsx?$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['react','es2015']
}
}, {
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader?outputStyle=expanded'
},
{
test:/\.styl/,
loader:'style-loader!css-loader!stylus-loader'
}, {
test:/\.json$/,
loader:'json-loader'
},
{
test:/\.(png|jpg|gif|woff|woff2)$/,
loader:'file-loader',
options:{
name:'build/images/[name].[ext]?[hash:7]'
}
},
{
test:/\.(mp4|ogg|svg)$/,
loader:'file-loader',
options:{
name:'videos/[name].[ext]?[hash:7]'
}
}
]
},
resolve:{
extensions:['.jsx','.js','.json','.css','.scss'],
alias:{
"echarts":"https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.1/echarts.min.js"
}
},
plugins:[
HtmlWebpackPluginConfig,
newwebpack.NoErrorsPlugin()
]
};

entry:入口文件，
output：输出文件，
__dirname：当前目录，
path:输出文件的目录，
filename：输出文件。

8.main.js里写上这些：

constReact=require('react');
constReactDom=require('react-dom');
importDemofrom'./components/Demo';
ReactDom.render(, document.getElementById('root'));

9.components可以写自身的组件了