加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

react+webapck多页面（multipage）程序

发布时间：2020-12-15 06:39:43 所属栏目：百科 来源：网络整理
导读：reactjs是facebook开源的新一代前端框架，基于组件式的编程，使得前端开发也能像传统客户端开发一样灵活 但是，为了兼顾已有的网站项目，需要把reactjs的页面与其他项目融合，就需要对页面进行拆分，也就是基于reactjs的多页面程序，本文构建了一个简单的rea

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:codetestreact_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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同