webpack+react我走过的那些坑

今天试着用webpack里面安装了一下react，抱着试试看的心态。然后在百度上一顿搜索方法，结果都是无疾而终，让人不开心。最终还是google救了我。这边记录一下安装过程。
安装了一个简易的react-dom做了一个实验。安装过程如下所示： install 最终的结果目录如下所示： mulu

首先安装webpack.
— mkdir douban
— cd douban
— npm init -y(生成package.json文件)
根目录下如下操作新建index.html文件
— mkdir dist
— cd dist
— touch index.html
在index.html中加入如下内容
<!DOCTYPE html>
```
<html>
    <head>
      <title>hello world</title>
    </head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>
```
接下来安装webpack，在根目录下：
— npm install –save-dev webpack webpack-dev-server webpack-cli

修改package.json文件，在“scripts”中加入”start”: “webpack-dev-server –config ./webpack.config.js –mode development

根目录下新建配置文件 webpack.config.js
— touch webpack.config.js

然后在文件中加入如下内容：
```
module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
}
```
entry指定入口文件，ouput指定输出文件位置，devserver指定网页中存的内容
创建index.js文件
— mkdir src
— cd src
— touch index.js
在index.js 文件加入console.log(“hello,world!”)

使用npm start 即可运行程序啦！
安装babel
babel插件主要是将es6 转为es5兼容的格式
— npm install –save-dev babel-core babel-loader babel-preset-env
— npm install –save-dev babel-preset-stage-2
— npm install –save-dev babel-preset-react
观察package.json文件变化，如下图所示：
webpack.config.js 文件变化，如下图所示：
根目录新建.babelrc文件
— touch .babelrc
添加如下内容：
```
{
"presets": [
    "env",
    "react",
    "stage-2"
]}
```
安装react
— npm install –save react react-dom
可以添加简单的测试代码，来测试是否成功

import React from ‘react’;
import ReactDOM from ‘react-dom’;
const title = ‘My Minimal React Webpack Babel Setup’;
ReactDOM.render(
```
<div>{title}</div>,
document.getElementById('app')
```
);
安装 react-hot-loader
— npm install –save-dev react-hot-loader

然后改变webpack.config.js文件如下所示： webpack2

在index.js 文件末尾添加 module.hot.accept();
然后 npm start 运行程序！成功！接下来可以做想做的事情了～