遥看套路挖掘机，不见当年老司机。this is a boilerplate
1.新建一个项目目录文件夹，暂且叫seed
cd seed
npm init
然后一直回车，最后yes，最终生成一个package.json文件
2.新建以下
- src 文件夹用于存放js，css，img等源码和引用的静态文件
- .babelrc babel编译器配置文件
- favicon.ico 浏览器默认读取的一个icon
- index.html 入口首页
- webpack.config.js webpack配置文件
3.用npm安装npm包
npm install webpack webpack-dev-server --save-dev
webpack和webpack-dev-server是打包工具和辅助开发的服务器，该服务器能热加载代码，自动刷新页面，代理服务器解决前端开发时跨域问题
见http://www.cnblogs.com/fengnovo/p/5983638.html
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
这几个是babel编译器的npm包。
npm install css-loader postcss-loader style-loader --save-dev
webpack需要处理样式文件打包的处理器
npm install react react-dom --save
react项目的两个基础npm包
再在package.json里的scripts对应的key里增加一句 "start": "webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot",
这样，就可以在命令行用npm start启动一个开发服务器并实时热更新开发时的代码。
"scripts": { "start": "webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot", "test": "echo "Error: no test specified" && exit 1" },
4.webpack.config.js配置，直接上代码
module.exports = { entry: __dirname+'/src/main.js', //指明编译开始的入口 output: { path: __dirname+'/bundle.js' //指明编译好的文件所在目录 }, module: { //webpack处理器模块，要处理什么就加什么处理器即loader loaders:[ { test: /.js$/, exclude: /node_modules/, loader: 'babel' //babel处理器，处理jsx/es6/es7 },{ test: /.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader' //处理css，style样式 } ] }, solove: [ '','.js','.jsx' //import时文件不写后缀，可以自动查找.jsx和.js后缀文件 ], devServer: { //webpack-dev-server配置，与webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot相辉映 contentBase: './', colors: true, inline: true, historyApiFallback: true } }
5.配置完webpack，里面的babel只是告知webpack用babel处理js，但是还要配置babel处理哪些文件格式，直接上代码
{ "presets": [ "react", "es2015", "stage-0" ] }
6.inde.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>novo Music</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
./bundle.js就是webpack.config.js里面配置的输出文件路径，然后被index.html引入
7.需要在src目录下新建一个main.js作为webpack.config.js配置里面所提到的入口编译文件
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello World</div>, document.getElementById('app') )
boilerplate套路这就样
项目所在github：https://github.com/fengnovo/diary/tree/master/seed