1. 默認已經安裝了nodejs，并輸入：npm init 根據提示輸入內容并 創建 package.json
2. 創建項目 reactapp
~~~
reactapp
|--app
|--components
|--productBox.jsx
|--main.jsx
|--build
|--index.html
|--bundle.js (該文件是webpack打包后生成的)
|--webpack.config.js
~~~
安裝以下依賴包:
~~~
npm install react --save-dev
npm install webpack webpack-dev-server --save-dev
npm install babel-loader babel-core --save-dev
npm install css-loader less-loader style-loader --save-dev
npm install url-loader --save-dev
npm install react-router --save-dev
npm install redux react-redux --save-dev // 可選
~~~
3. webpack.config.js文件內容如下:
~~~
var path = require('path');
module.exports = {
entry: ['webpack-dev-server/client?http://localhost:8080', path.resolve(__dirname, './app/main.jsx')],
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015','react']
}
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}, {
test: /\.less$/,
loader: 'style!css!less'
},{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192' // 這里的 limit=8192 表示用 base64 編碼 <= ８K 的圖像
}]
},
};
~~~
4. package.json文件內容如下:
~~~
{
"name": "wp211_app",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"dependencies": {
"react": "^15.4.2",
"webpack-dev-server": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.26.1",
"less-loader": "^2.2.3",
"react-dom": "^15.4.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"author": "",
"license": "ISC"
}
~~~
5. main.jsx 、 productBox.jsx 、 index.html 三文件內容分別如下:
main.jsx:
~~~
import React from 'react'
import { render } from 'react-dom';
import AppComponent from './components/productBox.jsx';
render(<AppComponent />, document.getElementById('content'));
~~~
productBox.jsx:
~~~
var React = require('react');
import { render } from 'react-dom';
var ProductBox = React.createClass({
render: function () {
return (
<div className="productBox">
Hello World!
</div>
);
}
});
module.exports = ProductBox;
~~~
index.html:
~~~
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<div id="content"></div>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
~~~
6. 運行測試:
~~~
npm run dev
~~~
瀏覽器訪問: http://localhost:8080
~~~
Hello World!
~~~
說明: 編輯器更新保存后，瀏覽器會自動刷新！
