webpack2+node+react+babel实现热加载(hmr)

前端之家收集整理的这篇文章主要介绍了webpack2+node+react+babel实现热加载(hmr)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁。

1. 先看效果

Demo地址 https://github.com/leinov/react-hmr-demo

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

{@H_404_70@
  "name"@H_404_70@:@H_404_70@ "react-hmr-demo"@H_404_70@,@H_404_70@
  "version"@H_404_70@:@H_404_70@ "1.0.0"@H_404_70@,@H_404_70@
  "description"@H_404_70@:@H_404_70@ "react-hmr-demo"@H_404_70@,@H_404_70@
  "main"@H_404_70@:@H_404_70@ "index.js"@H_404_70@,@H_404_70@
  "scripts"@H_404_70@:@H_404_70@ {@H_404_70@
    "dev"@H_404_70@:@H_404_70@ "node bin/devserver.js"@H_404_70@,@H_404_70@
    "build"@H_404_70@:@H_404_70@" webpack --config webpack.config.prod.js "@H_404_70@,@H_404_70@
    "start"@H_404_70@:@H_404_70@"node bin/server.js"@H_404_70@
  },@H_404_70@
  "repository"@H_404_70@:@H_404_70@ {@H_404_70@
    "type"@H_404_70@:@H_404_70@ "git"@H_404_70@,@H_404_70@
    "url"@H_404_70@:@H_404_70@ "git+https://github.com/leinov/react-hmr-demo.git"@H_404_70@
  },@H_404_70@
  "author"@H_404_70@:@H_404_70@ "leinov"@H_404_70@,@H_404_70@
  "license"@H_404_70@:@H_404_70@ "ISC"@H_404_70@,@H_404_70@
  "dependencies"@H_404_70@:@H_404_70@ {@H_404_70@
    "express"@H_404_70@:@H_404_70@ "^4.15.4"@H_404_70@,@H_404_70@
    "react"@H_404_70@:@H_404_70@ "^15.6.1"@H_404_70@,@H_404_70@
    "react-dom"@H_404_70@:@H_404_70@ "^15.6.1"@H_404_70@
  },@H_404_70@
  "devDependencies"@H_404_70@:@H_404_70@ {@H_404_70@
    "babel-core"@H_404_70@:@H_404_70@ "^6.26.0"@H_404_70@,@H_404_70@
    "babel-loader"@H_404_70@:@H_404_70@ "^7.1.2"@H_404_70@,@H_404_70@
    "babel-polyfill"@H_404_70@:@H_404_70@ "^6.26.0"@H_404_70@,@H_404_70@
    "babel-preset-es2015"@H_404_70@:@H_404_70@ "^6.24.1"@H_404_70@,@H_404_70@
    "babel-preset-react"@H_404_70@:@H_404_70@ "^6.24.1"@H_404_70@,@H_404_70@
    "babel-preset-react-hmre"@H_404_70@:@H_404_70@ "^1.1.1"@H_404_70@,@H_404_70@
    "css-loader"@H_404_70@:@H_404_70@ "^0.28.5"@H_404_70@,@H_404_70@
    "eventsource-polyfill"@H_404_70@:@H_404_70@ "^0.9.6"@H_404_70@,@H_404_70@
    "node-sass"@H_404_70@:@H_404_70@ "^4.5.3"@H_404_70@,@H_404_70@
    "sass-loader"@H_404_70@:@H_404_70@ "^6.0.6"@H_404_70@,@H_404_70@
    "style-loader"@H_404_70@:@H_404_70@ "^0.18.2"@H_404_70@,@H_404_70@
    "webpack"@H_404_70@:@H_404_70@ "^3.5.5"@H_404_70@,@H_404_70@
    "webpack-dev-middleware"@H_404_70@:@H_404_70@ "^1.12.0"@H_404_70@,@H_404_70@
    "webpack-hot-middleware"@H_404_70@:@H_404_70@ "^2.18.2"@H_404_70@
  }@H_404_70@
}@H_404_70@

scripts的几个命令

$ npm run dev //开发模式
$ npm run build //编译打包
npm start //正式环境运行

webpack.config.dev.js

var@H_404_70@ path =@H_404_70@ require@H_404_70@('path'@H_404_70@);@H_404_70@
var@H_404_70@ webpack =@H_404_70@ require@H_404_70@('webpack'@H_404_70@);@H_404_70@
 
module@H_404_70@.exports@H_404_70@ =@H_404_70@ {@H_404_70@

    devtool@H_404_70@:@H_404_70@ 'cheap-module-eval-source-map'@H_404_70@,@H_404_70@//打包构建信息@H_404_70@
    
    entry@H_404_70@:@H_404_70@ [

        'eventsource-polyfill'@H_404_70@,@H_404_70@//for IE@H_404_70@
        'webpack-hot-middleware/client'@H_404_70@,@H_404_70@//webpack服务连接到浏览器接收更新@H_404_70@
        
        './src/index.js'@H_404_70@
    ],@H_404_70@
    
    output@H_404_70@:@H_404_70@ {@H_404_70@
        filename@H_404_70@:@H_404_70@ 'boundle.js'@H_404_70@,@H_404_70@
        publicPath@H_404_70@:@H_404_70@ '/dist/js/'@H_404_70@ 
    },@H_404_70@
    
    module@H_404_70@:@H_404_70@ {@H_404_70@

        loaders@H_404_70@:@H_404_70@ [{@H_404_70@
                test@H_404_70@:@H_404_70@ /@H_404_70@\.@H_404_70@js@H_404_70@$@H_404_70@/@H_404_70@,@H_404_70@
                loaders@H_404_70@:@H_404_70@ ['babel-loader'@H_404_70@],@H_404_70@
                exclude@H_404_70@:@H_404_70@ /node_modules/@H_404_70@ //哪些文件下的需要用到babel@H_404_70@
            },@H_404_70@ {@H_404_70@
                test@H_404_70@:@H_404_70@ /@H_404_70@\.@H_404_70@css@H_404_70@$@H_404_70@/@H_404_70@,@H_404_70@
                loaders@H_404_70@:@H_404_70@ ['style-loader'@H_404_70@,@H_404_70@ 'css-loader'@H_404_70@],@H_404_70@
            },@H_404_70@
            {@H_404_70@
                test@H_404_70@:@H_404_70@ /@H_404_70@\.@H_404_70@scss@H_404_70@$@H_404_70@/@H_404_70@,@H_404_70@ 'css-loader'@H_404_70@,@H_404_70@ 'sass-loader'@H_404_70@],@H_404_70@
            {@H_404_70@
                test@H_404_70@:@H_404_70@ /@H_404_70@\.(@H_404_70@png@H_404_70@|@H_404_70@jpg@H_404_70@|@H_404_70@gif@H_404_70@)$@H_404_70@/@H_404_70@,@H_404_70@
                loaders@H_404_70@:@H_404_70@ ['url?limit=8192&name=images/[name].[ext]'@H_404_70@],@H_404_70@
            }@H_404_70@
        ]
    }@H_404_70@ ,@H_404_70@
    
    resolve@H_404_70@:{@H_404_70@
    
        alias@H_404_70@:@H_404_70@ {@H_404_70@
        
            css@H_404_70@:@H_404_70@ path@H_404_70@.resolve@H_404_70@(__dirname,@H_404_70@ 'public/static/css/'@H_404_70@),@H_404_70@ //css目录别名@H_404_70@
        }@H_404_70@
    },@H_404_70@
    
    plugins@H_404_70@:@H_404_70@ [
    
        new@H_404_70@ webpack@H_404_70@.HotModuleReplacementPlugin@H_404_70@(),@H_404_70@//热替换插件@H_404_70@
        new@H_404_70@ webpack@H_404_70@.NoEmitOnErrorsPlugin@H_404_70@()
    ]
};@H_404_70@

.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');
});

这样就可以实现热加载了,在项目根目录执行

$ 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$/,'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主要完成开发后的编译打包,在plugins里多了压缩插件,在项目根目录执行

$ 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('*','../index.html'));
});

app.listen(3200,function(err) {

    if (err) {
        console.log(err);
        return;
    }
  console.log('Listening at http://localhost:3200');
  
});
$ npm start //运行生产环境

Demo地址 https://github.com/leinov/react-hmr-demo

猜你在找的React相关文章