webpack3.0(三）整合react

进过2天的学习，基本了webpack的基础使用，学习webpack目的就是为了进行react的开发，所以今天搭建下react的开发环境。
第一步新建项目，并生成package.json.js文件。

第二步：关闭webstorm 找到工程所在的.iml文件，将其中的内容

<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$" />
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
</module>

修改成

<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager"> 
     <content url="file://$MODULE_DIR$">
      <excludeFolder url="file://$MODULE_DIR$/node_modules" />
      <excludeFolder url="file://$MODULE_DIR$/test" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
</module>

修改该配置的目的是防止webstorm卡死。由于安装的文件将会比较多，如果不修改工程会容易导致webstorm卡死，当然如果机子内存够大、cpu够快应该不需要进行该步操作，

第三步：然后执行以下命令来安装相应的依赖插件

#安装webpack
cnpm install webpack --save-dev
#安装babel 
cnpm install babel-core babel-loader --save-dev
#安装es6编译成es5  
cnpm install babel-preset-es2015 --save-dev
#安装babel编译react
cnpm install  babel-preset-react --save-dev
cnpm install file-loader url-loader --save-dev
#安装样式引用时需要的loader
cnpm install style-loader css-loader --save-dev
#安装react组件热加载功能
cnpm install babel-preset-react-hmre --save-dev
cnpm install html-webpack-plugin --save-dev
cnpm install webpack-dev-server --save-dev
cnpm install react react-dom --save-dev
#react组件局部刷新
cnpm install react-hot-loader --save-dev

执行完可以查看package.json.js的内容：

第四步：手动修改package.json.js
其实就是修改scripts的内容
修改前

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

修改后

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "start":"webpack-dev-server --colors --progress --hot --inline"
  },

第五步：添加.babelrc文件，内容如下

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

第六步：手动创建webpack.config.js 并填写如下内容：

var path=require('path');
const ROOT_PATH=path.resolve(__dirname);
const APP_PATH=path.resolve(ROOT_PATH,'app');
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:{
        index:path.resolve(APP_PATH,'index.jsx')
    },
    output:{
        path: BUILD_PATH,
        filename: '[name].bundle.js'
    },
    resolve:{
        extensions: ['.js', '.jsx']
    },
    module:{
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
   {test: /\.jsx$/, exclude: /node_modules/, loaders:[
                'react-hot-loader','babel-loader?presets[]=es2015&presets[]=react'
            ], include: APP_PATH},
            {test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap'},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    plugins:[
        new HtmlwebpackPlugin({
            title: 'My first react app'
        })
    ]
}

第七步：创建app文件夹以及index.jsx文件。
index.jsx的内容如下

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
        <div className="container">
            <h1>Hello React!</h1>
        </div>
    );
}

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);

文件目录结构大概如下：

执行npm start看是否存在异常，如果没有出现异常，则输入 http://localhost:8080/出现下面界面表示开发环境搭建完成，则可以开始react的开发咯