react-webpack-express实现多页面 — node.js开发

react-webpack 学习笔记 — node.js开发

最近开始学习Node.js开发，有很多基础知识和框架需要学习，所以打算将自己学习笔记记录下来，即可以和大家分享，也可以方便自己以后回顾知识。由于只是个人笔记，便不是详细的教程，有不懂的代码还请自行百度。

主要模块

• express
• webpack
• webpack-dev-middleware
• webpack-hot-middleware
• react
• react-dom
• react-router

辅助模块

• //es6转换
• babel-core
• babel-loader
• babel-preset-latest
• babel-preset-react
• // webpack加载器
• style-loader
• css-loader

介绍

自从用了react之后我就深深 的喜欢上它，认为它完全可以拿来用来开发任何一个我所想要的做的web项目，然而网上大部分react-webpack教程都是基于单页面的，将项目打包成一个bundle.js，在一个页面中进行全部进行加载，怎么看都有些不够人性化，会造成代码阿谀，所以我大算在多个页面上进行使用，经过了2天的努力终于摸到了点门道，可能并不是很完善，这只是其中的一种方法，要是大家有更好的实现多页面的方法还望推荐下。

废话不多说，我们开始把。

这里我没有是使用webpack-dev-server，而是配合webpack-dev-middleware和webpack-hot-middleware，基于express自己写了个小服务器，主要是为了配合react-router，并且实现多页面。

项目目录

.|____.babelrc|____dist|____package.json|____server.js|____src| |____css| | |____common.css| | |____index-page.css| | |____login-register-page.css| | |____reset.css| |____js| | |____components| | |____index.js| | |____login_register.js| |____views| | |____404.html| | |____index.html| | |____login_register.html|____webpack.config.js

代码介绍

.babelrc

{  "presets": ["latest", "react"]}

webpack.config.js

给entry赋值对象，实现多文件打包，vender需要在每个页面引入

var path = require('path');var webpack = require('webpack');var ROOT_PATH = path.resolve(__dirname);let configs = {  entry: {    vender: ['webpack/hot/dev-server', 'webpack-hot-middleware/client'], // 额外插件打包成vender    index: './src/js/index.js',    login_register: './src/js/login_register.js'  },  output: {    path: path.join(ROOT_PATH, 'dist'),    publicPath: '/', // output.path的相对路径    filename: 'js/[name].js' // 根据原始名动态命名  },  module: {    loaders: [      {        test: /\.css$/,        loaders: ['style', 'css']      }, {  // es6配置        test: /\.js$/,        loader: 'babel',        exclude: /node_modules/ // 排除node_modules内的文件      }    ]  },  plugins: [    new webpack.HotModuleReplacementPlugin(), // 热更新插件  ]};module.exports = configs;

server.js 自定义express服务器

这里express配合react-router的主要原理就是express解析不掉的域名，定向到特定的react-router让它去解析域名，注意这里react-router使用的是browserHistory模式

var express = require('express');var webpack = require('webpack');var WebpackHotMiddleware = require('webpack-hot-middleware');var WebpackDevMiddleware = require('webpack-dev-middleware');var config = require('./webpack.config.js');var compiler = webpack(config);var app = express();// 引入webpack组件app.use(WebpackDevMiddleware(compiler, {  publicPath: config.output.publicPath,  stats: { colors: true }}));app.use(WebpackHotMiddleware(compiler));var router = express.Router();router.get('/login', function (req, res, next) {  res.sendfile('./src/views/login_register.html'); // 发送静态文件});router.get('/register', function (req, res, next) {  res.sendfile('./src/views/login_register.html');});// 根目录下的所有404错误，引向index.html页面，让react-router进行解析router.get('/*', function(req, res){  res.sendfile('./src/views/index.html');});app.use(router);app.listen(3000, function () {  console.log('Listening on 3000');});

相关博客

手把手深入理解 webpack dev middleware 原理與相關 plugins
React Router 使用教程

项目源码

已经上传到我的github上react-webpack-express