遙看套路挖掘機，不見當年老司機。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