Webpack Express React Hot Reloading

webpack 基本配置

var path = require('path')


module.exports = {
  entry:path.resolve(__dirname,'src/app.js'),
  output:{
    path:path.resolve(__dirname,'public'),
    filename:'bundle.js',
    publicPath:'/assets/'
  },
  module:{
    loaders:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        query:{
          presets:['es2015','react','stage-0']
        }
      }
    ]
  }
}

entry:要打包文件
output:打包文件位置
module:打包要加载的模块--presets用来解析ES6,React,ES7语法
publicPath:指定公共URL地址在浏览器输出文件的引用--如果，你用webpack-dev-server做开发调试服务器，那么bundle.js的地址就是http://localhost:8080/assets/bundle.js

自动刷新和热替换

在用webpack-dev-server进行开发时自动刷新和hot replace是一个非常棒的功能，仅仅只用在entry中添加两行配置即可：

entry: [
  'webpack/hot/dev-server',
  'webpack-dev-server/client?http://localhost:8080',
  path.resolve(__dirname, 'src/app.js')
]

webpack-dev-server CLI

--content-base : 服务器根目录.
--quiet: 什么都不输出到控制台
--no-info: suppress boring information（忽略无用的信息）.
--colors: add some colors to the output（用颜色区分输出）.
--no-colors: don’t used colors in the output（不用颜色）.
--host : hostname or IP（主机名或ip）.
--port : port(端口，默认为8080).
--inline: embed the webpack-dev-server runtime into the bundle.
--hot: adds the HotModuleReplacementPlugin and switch the server to hot mode. 
       Note: make sure you don’t add HotModuleReplacementPlugin twice.
      (添加HotModuleReplacementPlugin插件，注意：不要添加两次)
--hot --inline also adds the webpack/hot/dev-server entry（在entry中加入webpack/hot/dev-server）.
--lazy: no watching, compiles on request (cannot be combined with --hot).
    （不监测，不要和--hot一起使用）
--https: serves webpack-dev-server over HTTPS Protocol. Includes a self-signed certificate that is used when serving the requests.

可以通过配置文件使用CLI

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var config = require('./webpack.config')

var compiler = webpack(
  config
);
var server = new WebpackDevServer(compiler, {
  // webpack-dev-server options

  contentBase: "/path/to/directory",
  // or: contentBase: "http://localhost/",

  hot: true,
  // 启用热替换
  // 添加 "webpack/hot/dev-server" 在entry
  // 注意: 不要添加再 `HotModuleReplacementPlugin` like the CLI option does. 

  // webpack-dev-middleware options
  quiet: false,
  noInfo: false,
  lazy: true,
  filename: "bundle.js",
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
  publicPath: "/assets/",
  headers: { "X-Custom-Header": "yes" },
  stats: { colors: true },
});
server.listen(8080, "localhost", function() {});

其他请参考webpack-dev-server官方文档

Express React Hot Reloading配置

安装包

npm install --save-dev webpack-dev-middleware
npm install --save-dev webpack-hot-middleware
npm install --save-dev babel-plugin-react-transform
npm install --save-dev react-transform-hmr

配置babel(.babelrc)

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }]
        }]
      ]
    }
  }
}

server.js配置（express)

var express = require('express');
var webpack = require('webpack');
var path = require('path');
 
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackHotMiddleware = require("webpack-hot-middleware");
var webpackConfig = require('../webpack.config');
 
var app = express();
 
var compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler));
app.use(webpackHotMiddleware(compiler));
app.use(express.static('src'));
 
app.listen(3000);

webpack.config配置

entry: [
  'webpack-hot-middleware/client',
  path.join(__dirname, 'src', 'App.js'),
],

启用内部插件

plugins: [
  new webpack.optimize.OccurenceOrderPlugin(), // recommanded by webpack
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin() // recommanded by webpack
]