React+react-router4+webpack2基礎環境搭建
package.json檔案
//一部分
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.0",
"react-hot-api": "^0.5.0",
"react-hot-loader": "^1.3.1" 注意：
在安裝了babel-core和babel-loader後，還要安裝規則集，安裝完後加入到配置檔案中。官方的規則集如下：
# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015
# react轉碼規則
$ npm install --save-dev babel-preset-react
# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3 若出現Cannot find module ‘babel-plugin-transform-es2015’的錯誤，刪除node_modules資料夾，重新安裝所有模組即可。
webpack.config.js
var webpack=require("webpack");
var path=require("path");
module.exports={
entry:{
login:["./app/js/login.js"],
},
devtool:"source-map",//使打包後的程式碼的報錯資訊精確到行
output:{
path:path.resolve(__dirname,"./build/js"),//絕對路徑,打包釋出時才用到
publicPath:'/js/',//index.html與打包後的js的相對路徑
filename:"[name].bundle.js"
},
module:{
loaders:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
// 在這裡新增 react-hot-loader，注意這裡使用的是loaders，所以不能用 query，應該把presets引數寫在 babel 的後面
loader:"react-hot-loader!babel-loader?presets[]=react,presets[]=es2015"
}
]
},
devServer: {
contentBase:'./',//配置伺服器目錄
publicPath:'/js/',//同output的publicPath
port: 8000,//配置埠
inline:true,//熱載入
hot:true,//熱替換
historyApiFallback: true//啟動URL後退功能
}
}1.react-hot-loader:
能讓修改的部分自動重新整理，這和自動重新整理網頁是不同的，僅僅是替換你修改的部分，不會丟失頁面狀態 。
2.“entry”：值可以是字串、陣列和物件。
倘若你的應用只有一個單一的入口，enter項的值你可以使用任意型別，最終輸出的結果都是一樣的。都是把互相依賴的js檔案打包成一個js檔案，在入口的html檔案中引用。
但是，如果你想新增多個彼此不互相依賴的檔案，你可以使用陣列格式的值。
如果你的應用是多頁面的而不是SPA，有多個html檔案（如index.html和index2.html）。然後你通過一個物件為每一個html生成一個bundle檔案。
3.利用devServer可以進行一些配置。
inline和hot的區別：
“inline”選項會為入口頁面新增“熱載入”功能（重新整理整個頁面），“hot”選項則開啟“熱替換（Hot Module Reloading）”，即嘗試重新載入元件改變的部分（而不是重新載入整個頁面）。如果兩個引數都傳入，當資源改變時，webpack-dev-server將會先嚐試HRM（即熱替換），如果失敗則重新載入整個入口頁面。
//物件
entry:{
login:["./app/js/login.js"],
main:["./app/js/login.js"],
}
//陣列
entry:["./app/js/login.js","./app/js/login.js"]
//字串
entry:"./app/js/login.js"login.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
class Example extends Component{
render(){
return (
<h2>hello</h2>
);
}
}
ReactDOM.render(<Example/>,document.getElementById("root"));index.html
index.html放在根目錄下。src的路徑與webpack.config.js配置的publicPath有關。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./js/login.bundle.js"></script>
</body>
</html>以上就搭建起基礎環境了。但是我們有時候用一些自動生成專案目錄的包，看到裡面都是用server.js檔案來起一個本地伺服器，然後用node+檔名來啟動專案。大致過程可以參考：
server.js
在以上檔案的基礎上，增加server.js
var webpack=require("webpack");
var devServer=require("webpack-dev-server");
var config=require("./webpack.config.js");
new devServer(webpack(config),{
publicPath: config.output.publicPath,//注意這裡需要再配置一次publicPath，可以去掉webpack.config.js中的devServer配置，把所有屬性都放在這裡來配置
}).listen(8000,'localhost',function(err,res){
if(err){
return console.log(err);
}
console.log("listening");
})修改package.json的npm script：
"start": "node server.js"
打包
使用html-webpack-plugin外掛：它的作用是可以將根目錄下的index.html拷貝一份到build目錄下，並修改html檔案中的src為正確的路徑（根據publicPath修改的）。
安裝html-webpack-plugin外掛。然後在webpack.config.js中新增：
plugins:[
new HtmlWebpackPlugin({
filename:'../index.html',//配置路徑和檔名（以webpack.config.js中的output的path為參照）
template:'./index.html'//以跟目錄下的index.html為模板來拷貝
})
]執行npm run build命令，生成build目錄。直接在瀏覽器開啟index.html即可看到效果。