react+webapck多页面（multipage）程序_webpack-react-multi-page-优快云博客

本文介绍如何使用React和Webpack构建多页面应用，实现不同页面间的独立加载与共享资源，同时保持良好的用户体验。

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

本文只适用于webpack3.x版本，前端变得太快，后面的版本以后再对应更新

预览

主页：
这里写图片描述

页面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-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