詳解webpack2+node+react+babel實現(xiàn)熱加載(hmr)
更新時間：2017年08月24日 08:31:45 作者：Leinov
這篇文章主要介紹了詳解webpack2+node+react+babel實現(xiàn)熱加載(hmr) ,非常具有實用價值，需要的朋友可以參考下
前端工程化開發(fā)的一個重要標志就是熱替換技術，它大大的提高開發(fā)效率，使我們專注于寫代碼，webpack2中的熱替換相比較1更加簡潔。
1. 先看效果
2.目錄結構
3.項目目錄結構文件描述
bin 執(zhí)行文件
node_modules node包
public 靜態(tài)資源文件
- static 靜態(tài)資源
- dist 編譯后文件
src 項目js文件
.bablrc babel配置文件
webpack.config.dev.js開發(fā)模式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 //開發(fā)模式 $ npm run build //編譯打包 npm start //正式環(huán)境運行
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?limit=8192&name=images/[name].[ext]'],
}
]
} ,
resolve:{
alias: {
css: path.resolve(__dirname, 'public/static/css/'), //css目錄別名
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//熱替換插件
new webpack.NoEmitOnErrorsPlugin()
]
};
.babelrc
{
"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');
});
這樣就可以實現(xiàn)熱加載了，在項目根目錄執(zhí)行
$ 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?limit=8192&name=images/[name].[ext]'],
}
]
} ,
resolve:{
alias: {
css: path.resolve(__dirname, 'public/static/css/'),
img: path.resolve(__dirname, 'public/static/img/'),
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
生產的webpack主要完成開發(fā)后的編譯打包，在plugins里多了壓縮插件,在項目根目錄執(zhí)行
$ npm run build
bin/server.js
生產環(huán)境啟動文件
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 //運行生產環(huán)境
這里是項目地址 https://github.com/leinov/react-hmr-demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React中如何設置多個className問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了React18?中的?Suspense?API使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了react native圖片解析流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
pubsub-js?是一個用于實現(xiàn)發(fā)布-訂閱模式的 JavaScript 庫,可以用于不同組件之間的通信,在 React 中,可以使用?pubsub-js?來實現(xiàn)組件之間的通信,本篇文章給大家講解pubsub-js在react中的使用,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了react-native消息推送實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
前端框架從MVC過渡到MVVM。從DOM操作到數(shù)據(jù)驅動，一直在不斷的進步著，本文給大家介紹React中setState同步和異步問題，感興趣的朋友一起看看吧2021-06-06
這篇文章主要介紹了react中braft-editor的基本使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關于React學習之事件綁定的幾種方法對比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-09-09
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React高階組件使用小結，一起看看吧2023-01-01
useEffect?返回函數(shù)執(zhí)行過程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過程源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04