react-webpack-express实现多页面 — node.js开发
2016-12-06 21:02
1096 查看
react-webpack 学习笔记 — node.js开发
最近开始学习Node.js开发,有很多基础知识和框架需要学习,所以打算将自己学习笔记记录下来,即可以和大家分享,也可以方便自己以后回顾知识。由于只是个人笔记,便不是详细的教程,有不懂的代码还请自行百度。主要模块
expresswebpack
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 原理與相關 pluginsReact Router 使用教程
项目源码
已经上传到我的github上react-webpack-express相关文章推荐
- 从零开始-使用React+Webpack+Nodejs+Express快速构建项目
- react+react-router+webpack+express+nodejs
- node.js express开发web问题
- 基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统
- 基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统
- react,react native,webpack,ES6,node.js----------今天上午学了一下node.js
- ReactJS webpack实现JS模块化使用的坑
- NodeJS+Socket.io+ExpressJS实现web聊天应用
- 我的第一篇博客 react+express+webpack实现关键字搜索
- 例子:实现最新版本Node.js中Express+mongodb的登录注册页面
- webpack 学习笔记 --- node.js开发
- NodeJS+Express开发web,为什么中文显示为乱码
- Webpack 实现 Node.js 代码热替换
- Node.js+Express4.x+mongodb3.x做Web开发时的Session处理
- webpack配合vue.js实现完整的单页面demo
- 用node.js+express.js+mongodb+jade开发一个完整的项目笔记(1)【页面即页面之间逻辑的制作】
- NodeJs+Express实现简单的Web增删改查
- Vue.js+webpack+node.js实现价格监测应用Ponitor
- node.js WEB开发中图片验证码的实现方法
- nodejs+express搭建电影网站之二 -----具体项目结构 开发环境的建立 测试页面流程跑通