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