react+webapck多页面（multipage）程序

来源：互联网发布：淘宝达人怎么介绍自己编辑：程序博客网时间：2024/06/06 01:08

reactjs是facebook开源的新一代前端框架，基于组件式的编程，使得前端开发也能像传统客户端开发一样灵活
但是，为了兼顾已有的网站项目，需要把reactjs的页面与其他项目融合，就需要对页面进行拆分，也就是基于reactjs的多页面程序，本文构建了一个简单的react+webpack 多页面demo，便于理解和运用

预览

主页：
这里写图片描述

页面1：
这里写图片描述

页面2：
这里写图片描述

各页面之间独立
通过超链接联系

项目结构

这里写图片描述

采用webpack和react结合
每个页面对应一个js文件，多个页面的js可以引用同一处资源或者组件
各页面共享某些打包的体积较大的公共三方库
各页面之间互相跳转

项目配置

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-serverProject is running at http://localhost:3000/webpack output is served from /Content not from webpack is served from ./srcHash: e84a0d2eab0b025ea9a6Version: webpack 3.8.1Time: 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]         homebuild/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 moduleswebpack: Compiled successfully.

在页面中打开http://localhost:3000即可

编译

在项目根目录，执行命令

npm run build

就可以将项目编译到对应的文件夹

执行结果

Hash: 8eda52a8c429140ebb4aVersion: webpack 3.8.1Time: 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]         homebuild/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

阅读全文

0 0