前端工程化开发的一个重要标志就是热替换技术，它大大的提高开发效率，使我们专注于写代码，webpack2中的热替换相比较1更加简洁。
1. 先看效果
2.目录结构
3.项目目录结构文件描述
bin 执行文件
node_modules node包
public 静态资源文件
- static 静态资源
- dist 编译后文件
src 项目js文件
.bablrc babel配置文件
webpack.config.dev.js开发模式webpack配置
webpack.config.pro.js生产模式webpack配置
3.技术依赖
- node
- react
- babel
- ES6/ES2015
- react-hmre
- webpack
babel-loader,css-loader,sass-loader,style-loader,webpack-hot-middleware,webpack-hot-middleware
热加载最重要的几个配置是packge.json/devserver.js/webpack.config.dev.js/webpack.config.prod.js/.babelrc
packge.json
{
"name": "react-hmr-demo",
"version": "1.0.0",
"description": "react-hmr-demo",
"main": "index.js",
"scripts": {
"dev": "node bin/devserver.js",
"build":" webpack --config webpack.config.prod.js ",
"start":"node bin/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/leinov/react-hmr-demo.git"
},
"author": "leinov",
"license": "ISC",
"dependencies": {
"express": "^4.15.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.28.5",
"eventsource-polyfill": "^0.9.6",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2"
}
}
scripts的几个命令
$ npm run dev //开发模式 $ npm run build //编译打包 npm start //正式环境运行
webpack.config.dev.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',//打包构建信息
entry: [
'eventsource-polyfill',//for IE
'webpack-hot-middleware/client',//webpack服务连接到浏览器接收更新
'./src/index.js'
],
output: {
filename: 'boundle.js',
publicPath: '/dist/js/'
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/ //哪些文件下的需要用到babel
}, {
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|gif)$/,
loaders: ['url"htmlcode">
{
"presets": ["react", "es2015"]，
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
devserver.js
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('../webpack.config.dev');
var app = express();
var compiler = webpack(config);
var webpackDevMiddleware = require("webpack-dev-middleware");
app.use(webpackDevMiddleware(compiler, {
noInfo: false, //true将打印编译信息（建议false，true会打印很多信息）
publicPath: config.output.publicPath //绑定middleware
}));
var webpackHotMiddleware = require('webpack-hot-middleware');
app.use(webpackHotMiddleware(compiler));
app.get('*', function(req, res) {
res.sendFile(path.resolve(__dirname, '../index.html')); //
});
app.listen(3100, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3100');
});
这样就可以实现热加载了，在项目根目录执行
$ npm run dev
webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'./src/index.js'
],
output: {
path: path.join(__dirname, 'public/dist/js'),
filename: 'boundle.js',
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/
}, {
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|gif)$/,
loaders: ['url"htmlcode">
$ npm run build
bin/server.js
生产环境启动文件
var path = require('path');
var express = require('express');
var app = express();
var oneYear = 60 * 1000 * 60 * 24 * 30;
app.use(express.static(path.resolve(__dirname, '../public'), { maxAge: oneYear }));
app.get('*', function(req, res) {
res.sendFile(path.resolve(__dirname,'../index.html'));
});
app.listen(3200, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3200');
});
$ npm start //运行生产环境
这里是项目地址 https://github.com/leinov/react-hmr-demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“详解webpack2+node+react+babel实现热加载(hmr)”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。