前期準備
1.安裝Node Node 安裝地址
2.通過NPM 全局安裝Webpack。命令:npm install -g webpack
簡易Demo搭建及說明
1.創建目錄結構
創建如下目錄：
目錄說明:
build:用于存放經過webpack打包后的js文件
jsx:用于存放實際開發編寫的jsx文件(即實際開發的js代碼都寫在這個目錄下的文件中)
2.生成 package.json文件
在命令行輸入 npm init 生成package.json文件,按照提示輸入相關信息，生成文件如下：
{
"name": "frontdemo",
"version": "1.0.0",
"description": "front demo project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:/xx.xx.xx"
},
"keywords": [
"demo",
"front"
],
"author": "wuqke",
"license": "ISC"
}
該文件是包依賴管理的描述性文件，用于管理項目中通過NPM安裝的依賴。
生成package.json后目錄結構如下:
3.創建webpack.config.js文件
在frontDemo下創建webpack.config.js，內容如下:
module.exports = {
entry: {
index: './jsx/index.jsx',
},
output: {
filename: './build/[name].js'
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ["es2015", "react"]
}
},
]
}
};
屬性說明:
entry：需要通過webpack打包處理的入口文件
output:webpack打包處理后輸出的文件位置和名稱。結合上面的例子，就是webpack在處理./jsx/index.jsx后，會在./build/目錄下生成一個index.js（[name]對應于entry中的key）的文件。
loaders:下面大致的意思是，從入口文件中引入的模塊(通過require或者import),后綴為js或者jsx的文件都經過babel loader處理( node_modules的除外)。因為我們我們的代碼是es6和jsx風格的代碼，所以需要在query中使用es2015和react來進行轉換。
4.創建html,jsx文件，并安裝相關依賴
現在開始創建jsx,html文件。
1.在創建html的文件中加入剛剛webpack輸出的js，index.html內容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Front Demo</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<body>
<div id="main">
</div>
<script src="build/index.js" />
</body>
</html>
2.在jsx文件夾下創建index.jsx，添加內容如下(里面涉及到相關的React內容和es6語法，不熟悉的可以通過查閱參考文獻進行相關的學習):
import React from 'react';
import ReactDOM from 'react-dom';
class MainContentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
hello,this is first demo
</div>
);
}
}
ReactDOM.render(
<MainContentComponent/>,
document.getElementById('main')
);
因為這里引入了React和ReactDOM，所以我們需要通過npm來安裝相關的依賴，使得webpack在打包處理的時候可以引用到這些依賴的模塊,在package.json所在的目錄下運行以下兩條命令:
npm install react --save
npm install react-dom --save
這樣，打開package.json，你就會看到如下內容：
{
"name": "frontdemo",
"version": "1.0.0",
"description": "front demo project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:/xx.xx.xx"
},
"keywords": [
"demo",
"front"
],
"author": "wuqke",
"license": "ISC",
+ "dependencies": {
+ "react": "^15.3.2",
+ "react-dom": "^15.3.2"
+ }
}
加號對應的行為新添加的內容，說明依賴的模塊react,react-dom已經安裝到該項目中了,注意，必須使用--save 才會將依賴的信息寫到package.json中，自己獨立開發的項目，不加--save寫入到package.json也許不會出現錯誤，但是當別人下載你的項目開發就會發生錯誤。不過無論如何，自己開發還是團隊項目，使用--save將依賴寫入到依賴描述文件中，是更好的選擇和習慣。
5.運行webpack，在build目錄下生成目標js
此時，我們就可以在webpack.config.js所在的目錄下運行webpack，來生成瀏覽器端js引擎可以識別的目標文件了，你只需要打命令webpack，webpack就會在該目錄下找webpack.config.js，根據這個js下的文件來打包處理對應的文件了。輸入命令后，你會發現有如下錯誤：
這是因為，webpack里面使用的loader，也是開發相關的依賴，也需要通過npm來安裝到該項目中來，命令如下：
npm install webpack --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
安裝完后,package.json應多了如下內容:
{
"name": "frontdemo",
"version": "1.0.0",
"description": "front demo project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:/xx.xx.xx"
},
"keywords": [
"demo",
"front"
],
"author": "wuqke",
"license": "ISC",
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
+ "devDependencies": {
+ "babel-core": "^6.17.0",
+ "babel-loader": "^6.2.5",
+ "babel-preset-es2015": "^6.16.0",
+ "babel-preset-react": "^6.16.0",
+ "webpack": "^1.13.2"
+ }
}
上面在使用npm install時，添加的參數是--save-dev，而不是--save。因為我們這里加進來的依賴是屬于開發中需要的依賴，實際項目運行并不需要這些依賴，所以將其放在devDependencies，加以區分，方便管理。
這時候，你再運行webpack,就會發現如下信息：
說明webpack已經成功輸出目標js，此時目錄結構如下：
build目錄下，已經生成了index.js,在瀏覽器中打開index.html，如果在頁面中看到如下字樣：
hello,this is first demo
說明你已經成功使用webpack打包處理輸出了目標文件。
在實際開發的時候，你或許在jsx文件中修改了某個字段，就想馬上刷新瀏覽器，看到實際的效果，但是又不想重復輸入命令webpack來打包處理，那你可以試試這個命令：
webpack --progress --colors --watch
該命令會啟動一個常駐進程，實時監測jsx文件的變化并更新對應的目標文件。
6.使用React-Bootstrap
React-Bootstrap是Bootsrap項目使用React重寫而成的中后臺前端頁面框架，非常適合迅速開發相關后臺界面。話不多說，使用npm來將其安裝到本項目中：
npm install react-bootstrap --save
在index.html中引入相關css文件，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Front Demo</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <link rel="stylesheet" >
<body>
<div id="main">
</div>
<script src="build/index.js" type="text/javascript"></script>
</body>
</html>
其實也可以像引入js那樣在js代碼中引入css，只需要在webpack中加入style-css loader即可，不過這里不再給出例子。
然后，查閱React-Bootstrap Components,將需要的組件引入并放在你想要它出現的位置即可，以Bootstrap 導航欄為例，修改index.jsx代碼如下：
import React from 'react';
import ReactDOM from 'react-dom';
+import {Nav,Navbar,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';
class MainContentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
- <div>
- hello,this is first demo
- </div>
+ <Navbar inverse>
+ <Navbar.Header>
+ <Navbar.Brand>
+ <a href="#">React-Bootstrap</a>
+ </Navbar.Brand>
+ <Navbar.Toggle />
+ </Navbar.Header>
+ <Navbar.Collapse>
+ <Nav>
+ <NavItem eventKey={1} href="#">Link</NavItem>
+ <NavItem eventKey={2} href="#">Link</NavItem>
+ <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-+dropdown">
+ <MenuItem eventKey={3.1}>Action</MenuItem>
+ <MenuItem eventKey={3.2}>Another action</MenuItem>
+ <MenuItem eventKey={3.3}>Something else here</MenuItem>
+ <MenuItem divider />
+ <MenuItem eventKey={3.3}>Separated link</MenuItem>
+ </NavDropdown>
+ </Nav>
+ <Nav pullRight>
+ <NavItem eventKey={1} href="#">Link Right</NavItem>
+ <NavItem eventKey={2} href="#">Link Right</NavItem>
+ </Nav>
+ </Navbar.Collapse>
+ </Navbar>
);
}
}
ReactDOM.render(
<MainContentComponent/>,
document.getElementById('main')
);
在瀏覽器中打開頁面，看到如下頁面：
參考文獻中包含了React，es6語法等技術框架的相關文獻，有需要的可以參閱。
