转载请注明出处：王亟亟的大牛之路
最近都赋闲，然后前些天开了个会就是关于“不加班就得死“的死命令，作为抵制加班的先头兵，我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了，就在这个大条件下捡起我丢在地上的React。
ok，那既然知道要做什么了，就要考虑用什么来发布项目，这里第一考虑到Webpack
那Webpack能干什么？
官方对他的解释很简单
This small tutorial will guide you through a simple example.
我们用Webpack 来构建项目处理一些打包的问题，当然你得有node.js环境
安装Webpack以及简单构建项目首先我们要找一个地方把 npm初始化的行为做掉，我这里建了个空目录
接下来要初始化当前目录的npm环境
npm init
初始化完会有一个很多空字段的 package.json文件
默认入口 ：index.js 默认版本 “1.0.0 默认项目名：react 和一些默认标签，这不要紧反正之后我们会加以修改
初始化完我们就可以装webpack了npm i webpack --save-dev
我们的目录会多一个node_modules文件夹，里面一堆东西，你不用care里面有什么
接下来就构建下我们的项目
除了bundle.js是之后生成的其他都是手动建的
配置Webpack他也有一个清单文件，名为webpack.config.js
我们输入以下内容
var path = require("path');module.exports = { entry: path.resolve(__dirname, 'app/main.js'), output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', },}; entry : package.json 中 entry 对应内容 output : 默认为 dist 文件夹，每个 entry key 对应 key.js, common.js, key.css, common.css(如果没有样式文件则没有 css 文件)。
然后就输入一些 简单的页面内容来测试我们的项目是否正确(页面代码来自官方demo)
app/component.js
'use strict';module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello Wjj'; return element;}; app/main.js
'use strict';var component = require('./component.js');document.body.appendChild(component()); 然后是入口页面
build/index.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> </head> <body> <script src="bundle.js"></script> </body></html>
bundle.js 暂时没有后面build会生成的
因为我们是用webpack发布的所以在package.json做一下修改
"scripts": { "build": "webpack" } 加完后 npm run build下就有这个bundle文件了
一直build比较蛋疼为了更好地使用还需要加入webpack-dev-server 先下为敬
npm i webpack-dev-server --save
下完后修改配置文件
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" } 在之后输入
npm run dev
就可以跑起来了，输入http://localhost:8080/
效果如下
ok，简单的搭建就完成了，接下来就可以干React部分了