webpack+react环境搭建与hello world

周末呆了两天星巴克，通读了一遍react以及部分npm，webpack的文档，终于可以给一些像我一样被前端杂乱的工具搞得很迷茫的同学写一个webpack+react的新手教程了。

准备工作

现在前端的东西太杂乱，必须有一条清晰的路线，一步步来。

这个周末我的学习步骤是这样的

安装node，读一遍npm getting start部分的文档，这样你就知道npm install以后发生了什么，知道package.json到底配置了什么。知道node是如何管理、加载依赖。
读了js good parts的对象、函数、继承三章
读ruanyf老师es6 class部分
读webpack的tutorial

以上这几步做好了，就可以很快看懂下面的教程了

webpack＋react hello world

github上有搭建好的项目环境可以参考，如果觉得对你有帮助，欢迎star哦

npm install 以后运行 webpack-dev-server，就可以在localhost:8080看到效果了

正式开始

STEP1 安装依赖

首先新建一个文件夹，里面的目录结构大致是这样子

├── app
│   ├── components
│   │   └── app.js
│   └── index.js
├── index.html
├── package.json
└── webpack.config.js
复制代码

然后，我们需要使用npm安装一些依赖与工具

npm install --save react react-dom lodash 安装公共的包

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader style-loader css-loader webpack webpack-dev-server 开发环境需要用到的包

这两条命令里的--save和--save-dev参数表示在下载包的同时，更新package.json文件的内容，这样其他人拿到这个项目，只需要执行npm install就可以安装齐依赖了。不必运行上面两条命令。

运行完后，你的package.json里会包含如下的内容

  "dependencies": {
    "lodash": "^4.17.2",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

复制代码

这里简单介绍一下各个包的作用

lodash可以理解为加强版underscore，一个方便的工具库
react 和 react-dom就是react相关的库
webpack是打包工具，webpack-dev-server是我们开发环境的服务器
babel相关的包可用理解成js的翻译器，让你提前用上es6，jsx这样的语法，由babel帮你翻译成es5，从而在浏览器中执行

STEP2 配置webpack

编辑webpack.config.js,写入如下内容

var webpack = require("webpack") 
var path = require("path")

module.exports = {
 devtool: "inline-source-map",
 entry: [
  "webpack-dev-server/client?http://127.0.0.1:8080/",
  "webpack/hot/only-dev-server",
  "./app"
 ],

 output: {
  path: path.join(__dirname, "public"),
  filename: "bundle.js"
 },
 resolve: {
  modulesDirectories: ["node_modules", "app"],
  extensions: ["", ".js"]
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ["react-hot", "babel?presets[]=react,presets[]=es2015"]
   },
   {
    test: /\.css?$/,
    exclude: /node_modules/,
    loaders: ["style", "css"]
   }
  ]
 },
 plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin()
 ]
}
复制代码

这个配置文件涉及webpack本身以及webpack-dev-server的配置各个配置项的目的，可以查阅webpack官方文档

STEP3 代码

index.html,非常简单，定义了一个react组件的mountNode app，以及加载我们通过webpack build出来的bundle.js


<!DOCTYPE html>
<html>
<head>
    <title>React Hello World</title>
</head>
<body>
    <div id="app" />
    <script src="bundle.js"></script>
</body>
</html>
复制代码

app/index.js, import react相关的库以及我们自定义的，名叫App组件

import React from 'react'
import {render} from 'react-dom'
import App from 'components/app'

render(<App />, document.getElementById('app'))
复制代码

app/components/app.js 定义了App组件并export它

import React from "react"

class App extends React.Component {

	render(){
		return(
			<div><h1>Hello React+Webpack</h1></div>
			)
	}
}

export default App
复制代码

大功告成

运行webpack-dev-server，如果提示找不到webpack命令，可以运行node_modules/webpack-dev-server/bin/webpack-dev-server.js

不出意外，访问http://localhost:8080就可以在浏览器中看到效果了