搭建 react+webpack开发环境

以前尝试过几个教程的搭建方法但是最后都失败了，最后在豆青学姐的教程和李婷婷学姐的帮忙下解决了这个问题，下面简单记录一下。

1.创建项目文件夹webpack-hello-demo
npm init 初始化文件夹产生package.json文件
2.安装webpack

• npm install webpack --save-dev 安装webpack依赖

• 创建index.html文件

• 创建入口文件entry.js（touch entry.js）
  document.write("hello")

• 创建bundle.js文件 内容为空
  三个文件都创建之后运行命令 webpack ./entry.js bundle.js会看到bundle.js中生成了很多代码，这就是webpack打包之后的结果。

3.配置webpack
创建配置文件webpack.config.js

module.exports = {
    entry: "./entry.js", // 要打包的入口文件
    output: {               //打包后的文件
        path: __dirname,   //表示使用绝对路径
        filename: "bundle.js" //输出文件名
    },
    module: {
        loaders: [            //用于加载一些静态文件夹（css样式，图片之类）
            { test: /\.css$/, loader:  "style-loader!css-loader"  },
            //加载css
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/, //不进行转换的文件，可以提高打包速度
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader?limit=1000&name=images/[name].[ext]',//加载图片
            }
        ]
    }
};

配置文件创建完成后执行webpack 再运行index.html文件 出现hello说明配置成功

4.安装express
npm install express --save-dev

创建server.js

var express = require('express');
var app = express();

app.use(express.static('./')); //访问当前目录下的静态文件。默认访问index.html

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
})

完成之后执行命令webpack 打包文件
执行node server.js开启服务器
浏览器访问 http://localhost:3000/ ， 页面显示hello，运行成功。

5.配置react es5 babel6
这里需要安装一些依赖，执行下面的命令

npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev  
npm install babel-preset-es2015 --save   
npm install --save-dev babel-preset-react 

创建文件.babelrc

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

6.使用react例子测试
entry.js:

import React, {Component} from 'react';
import {render} from "react-dom";

class HelloMessage extends React.Component {

    render() {
        return 
Hello World
;
    }
}
render(, document.getElementById('app'));

index.html:

    
    


  // 添加的div，渲染至div中

完成之后执行命令webpack 打包文件
执行node server.js开启服务器
浏览器访问 http://localhost:3000/ ， 页面显示hello，运行成功。

所有的文件都在根目录下：

文件结构

这样就搭建好啦