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" ,
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5",
"babel-preset-react": "^6.24.1"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router-dom": "^4.1.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即可看到效果。