webpack3+node+react+babel實現熱加載(hmr)

前端工程化開發的一個重要標誌就是熱替換技術，它大大的提升開發效率，使咱們專一於寫代碼，webpack3中的熱替換相比較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

{
  "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?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');
});

這樣就能夠實現熱加載了，在項目根目錄執行

$ 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主要完成開發後的編譯打包，在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('*', 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 //運行生產環境

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