reactjs是facebook开源的新一代前端框架，基于组件式的编程，使得前端开发也能像传统客户端开发一样灵活
但是，为了兼顾已有的网站项目，需要把reactjs的页面与其他项目融合，就需要对页面进行拆分，也就是基于reactjs的多页面程序，本文构建了一个简单的react+webpack 多页面demo，便于理解和运用
预览
主页：
页面1：
页面2：
项目结构
项目配置
react配置文件
package.json
{
"name": "react_multipage_demo","version": "0.1.0","private": true,"dependencies": { "antd": "^2.12.8","react": "^15.6.1","react-dom": "^15.6.1" },"scripts": { "start": "webpack-dev-server","build": "webpack" },"devDependencies": { "babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-env": "^1.6.1","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","copy-webpack-plugin": "^4.2.3","css-loader": "^0.28.7","less": "^2.7.3","less-loader": "^4.0.5","style-loader": "^0.19.0","webpack": "^3.8.1","webpack-dev-server": "^2.9.4" } }
- 引用了antd库
- 采用babel来作为资源loader和编译工具
- 采用webpack进行打包和调试
webpack配置文件
webpack.config.js
var path = require('path');
var webpack = require('webpack')
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
home: __dirname + "/src/index.js",page1: __dirname + "/src/page1.js",page2: __dirname + "/src/page2.js"
},output: {
path: path.resolve(__dirname,'output'),// equal to __diname + '/build'
filename: 'build/[name].bundle.js',chunkFilename: 'build/[id].chunk.js'
},// devtool: 'eval-source-map',
devServer: {
inline: true,// hot load
contentBase: './src',port: 3000,// dev server listen port
},module: {
rules: [
{
test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
presets: ['react','es2015']
}
},},{
test: /\.css$/,loader: 'style-loader!css-loader'
},{
test: /\.less$/,loader: 'style-loader!css-loader!less-loader'
},{
test: /\.(png|jpg|gif)$/,loader: 'url?limit=819200'
}
]
},plugins: [
// new HtmlWebpackPlugin({
// title: "myapp for test"
// })
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',filename: 'build/vendor.bundle.js'
}),// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// }),// there are promblem working with webpack v3
new CopyWebpackPlugin([
{
from: __dirname + '/src',ignore: '*.js' // copy all the files except js
}
])
]
}
- 多页面配置了多个entry
- webpack配置dev server以及编译的output
- webpack配置拷贝module，为了在build的时候顺便把html和其他资源文件自动拷贝到输出文件夹
- 需要对编译添加优化，比如compress，sourcemap等
代码
在src目录里面建立三个页面对应的js和html
以home页面为例
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import {Tag} from 'antd'
export default class Home extends React.Component
{
render()
{
return (
<div>
<h1>this is the home page</h1>
<Tag color="red"><a href="./page1.html">page1</a></Tag>
<Tag color="green"><a href="./page2.html">page2</a></Tag>
</div>
);
}
}
ReactDOM.render(<Home/>,document.getElementById('home'));
index.html
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>home</title>
</head>
<body>
<div id="home"></div>
<script type="text/javascript" src="./build/vendor.bundle.js"></script> <!-- this must before the latter script -->
<script type="text/javascript" src="./build/home.bundle.js"></script>
</body>
</html>
值得注意的是
- 预先在html中写入对编译之后的xxx.bundle.js文件的引用
- vendor.bundle.js的引用一定要放在index.bundle.js之前
运行和编译
在这之前，需要安装node.js依赖包，在项目根目录执行命令
npm install
运行
在项目根目录，执行命令
npm run start
就可以启动webpack自带的devserver进行调试，端口可以设置
运行结果
> react_multipage_demo@0.1.0 start D:\codetest\react_multipage_demo
> webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /
Content not from webpack is served from ./src
Hash: e84a0d2eab0b025ea9a6
Version: webpack 3.8.1
Time: 12062ms
Asset Size Chunks Chunk Names
build/page2.bundle.js 3.29 kB 0 [emitted] page2
build/page1.bundle.js 3.29 kB 1 [emitted] page1
build/home.bundle.js 3.6 kB 2 [emitted] home
build/vendor.bundle.js 5.19 MB 3 [emitted] [big] vendor
asset/test.md 25 bytes [emitted]
index.html 344 bytes [emitted]
page1.html 359 bytes [emitted]
page2.html 359 bytes [emitted]
asset/tomb_raider.jpg 415 kB [emitted] [big]
[0] ./node_modules/react/react.js 56 bytes {3} [built]
[12] ./node_modules/react-dom/index.js 59 bytes {3} [built]
[128] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {3} [built]
[482] multi (webpack)-dev-server/client?http://localhost:3000 ./src/index.js 40 bytes {2} [built]
[483] ./node_modules/url/url.js 23.3 kB {3} [built]
[489] ./node_modules/strip-ansi/index.js 161 bytes {3} [built]
[491] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {3} [built]
[492] (webpack)-dev-server/client/socket.js 1.05 kB {3} [built]
[494] (webpack)-dev-server/client/overlay.js 3.73 kB {3} [built]
[499] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {3} [built]
[503] ./src/index.js 3.33 kB {2} [built]
[1101] multi (webpack)-dev-server/client?http://localhost:3000 ./src/page1.js 40 bytes {1} [built]
[1102] ./src/page1.js 3.01 kB {1} [built]
[1103] multi (webpack)-dev-server/client?http://localhost:3000 ./src/page2.js 40 bytes {0} [built]
[1104] ./src/page2.js 3.01 kB {0} [built]
+ 1090 hidden modules
webpack: Compiled successfully.
在页面中打开http://localhost:3000即可
编译
在项目根目录，执行命令
npm run build
就可以将项目编译到对应的文件夹
执行结果
Hash: 8eda52a8c429140ebb4a
Version: webpack 3.8.1
Time: 12618ms
Asset Size Chunks Chunk Names
build/page2.bundle.js 3.13 kB 0 [emitted] page2
build/page1.bundle.js 3.13 kB 1 [emitted] page1
build/home.bundle.js 3.46 kB 2 [emitted] home
build/vendor.bundle.js 4.87 MB 3 [emitted] [big] vendor
asset/test.md 25 bytes [emitted]
page1.html 359 bytes [emitted]
index.html 344 bytes [emitted]
page2.html 359 bytes [emitted]
asset/tomb_raider.jpg 415 kB [emitted] [big]
[35] (webpack)/buildin/global.js 488 bytes {3} [built]
[170] (webpack)/buildin/module.js 495 bytes {3} [built]
[480] ./src/index.js 3.33 kB {2} [built]
[676] ./node_modules/moment/locale ^\.\/.*$ 2.79 kB {3} [optional] [built]
[961] (webpack)/buildin/amd-options.js 80 bytes {3} [built]
[1078] ./src/page1.js 3.01 kB {1} [built]
[1079] ./src/page2.js 3.01 kB {0} [built]
+ 1073 hidden modules
在生成的output文件里面就是编译之后的程序
可以直接打开index.html静态页面，也可以将output里面的内容部署到web server
源码下载
csdn：reactmultipage
github：reactmultipage
