vínculo original
Este artículo está escrito por mi colega, creado en conjunto con expreso webpack. El siguiente es el texto, más adelante voy a adjuntar mi interpretación

Expreso combinado webpack lograr HMR

archivo Benpian principalmente sobre Express para lograr combinar webpack y extremos delantero y trasero de la actualización de la generación de calor, si usted no sabe webpack Lectura recomendada
webpack documentos oficiales sitio web

Qué

¿Cuál es el servidor dev webpack

servidor dev webpack es un Node.js ligeros expresan servidor, realizar la actualización webpack salida de código compilado en tiempo real. El extremo posterior de la separación frontal utiliza con frecuencia en el desarrollo del proyecto anterior. Sin embargo, este artículo no debería hablado de ello.

webpack dev middleware

Webpack dev middleware es una WebPack de middleware. Se utiliza para distribuir Express en archivos compilados necesidad WebPack. Se puede utilizar código térmica finalización sobrecarga sola función (recarga caliente).

características:

No escribe los archivos en el disco duro, basado totalmente en aplicación de memoria.
Si un modo de reloj cambios en el código del monitor, compila automáticamente webpack, si el proceso de compilación archivo solicitado webpack, webpack dev middleware solicitud se retrasará hasta después de la finalización de la traducción se inicia de nuevo la transmisión del archivo compilado.

webpack middleware caliente

Webpack middleware caliente webpack se actualiza mediante la suscripción de compilar, después de la ejecución por HMR API webpack de estos módulos de código actualizaciones empujado al navegador.

HMR

HMR que el reemplazo del módulo caliente webpack es una característica importante. Esto nos permite lograr nuestro actualizar en tiempo real del código de la página actual sin actualizar la página del navegador de forma manual.

El HMR principio es el código de aplicación en nuestro desarrollo añadió el HMR tiempo de ejecución, que es un cliente módulo de HMR (cliente de navegador) para el desarrollo y el servidor de comunicaciones para recibir actualizaciones. webpack trabajo del servidor es el middleware caliente antes mencionado, será compilado actualización de código después de formato JSON para dar salida a HMR tiempo de ejecución se describirá en más JSON actualizada dinámicamente por el código apropiado.

Cómo

Configuración webpack

Presentado por primera vez en el perfil webpack

var webpack = require('webpack');
var HotMiddleWareConfig = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'

module.exports = {
    context: __dirname,
    entry: [
        // 添加一个和HotMiddleWare通信的客户端             
        HotMiddleWareConfig,
        // 添加web应用入口文件 
        './client.js'
    ],
    output: {
        path: __dirname,
        publicPath: '/',
        filename: 'bundle.js'
    },
    devtool: '#source-map',
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        // 在 webpack 插件中引入 webpack.HotModuleReplacementPlugin 
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
};

webpack.config.js ejemplo webpack-hot-middleware

En nuestro desarrollo está configurado medio ambiente. getEntries es obtener automáticamente un archivo de configuración de entrada y añadir medio webpack caliente de acuerdo con nuestras reglas.

var webpack = require('webpack');
var path = require('path')
var merge = require('webpack-merge')
var baseConfig = require('./webpack.base')
var getEntries = require('./getEntries')

var publicPath = 'http://0.0.0.0:7799/dist/';
var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';

var assetsInsert = require('./assetsInsert')

module.exports = merge(baseConfig, {
  entry: getEntries(hotMiddlewareScript),
  devtool: '#eval-source-map',
  output: {
    filename: './[name].[hash].js',
    path: path.resolve('./public/dist'),
    publicPath: publicPath
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new assetsInsert()
  ]
})

la configuración rápida

Expresar configuración principalmente en cuatro pasos:

Al presentar el perfil webpack y compiladores webpack generada
El compilador está conectado a webpack dev middleware
El compilador está conectado a webpack middleware caliente
La definición de configuración expreso

var http = require('http');

var express = require('express');

var app = express();

app.use(require('morgan')('short'));

// ************************************
// This is the real meat of the example
// ************************************
(function() {
  // Step 1: 引入 webpack 的配置文件和 生成 webpack 的编译器
  var webpack = require('webpack');
  var webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : './webpack.config');
  var compiler = webpack(webpackConfig);
  // Step 2: 将编译器挂载给 webpack dev middleware
  app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
  }));

  // Step 3: 将编译器挂载给 webpack hot middleware
  app.use(require("webpack-hot-middleware")(compiler, {
    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
  }));
})();

// 定义 express 配置

app.get("/", function(req, res) {
  res.sendFile(__dirname + '/index.html');
});
app.get("/multientry", function(req, res) {
  res.sendFile(__dirname + '/index-multientry.html');
});

if (require.main === module) {
  var server = http.createServer(app);
  server.listen(process.env.PORT || 1616, function() {
    console.log("Listening on %j", server.address());
  });
}

server.js ejemplo webpack-hot-middleware

Distinguir entre los entornos de desarrollo y producción

Tenga en cuenta que la definición de webpack middleware debe estar relacionado con la definición de enrutador previa y expresa. Otro punto aquí es solo entorno de desarrollo server.js utilizado en el entorno de construcción, no es necesario volver a utilizarlos. Por lo tanto, nuestro uso real necesidad de distinguir entre los entornos de desarrollo y producción mediante la definición de la variable de entorno

var NODE_ENV = process.env.NODE_ENV || 'production';
var isDev = NODE_ENV === 'development';

if (isDev) {
    var webpack = require('webpack'),
        webpackDevMiddleware = require('webpack-dev-middleware'),
        webpackHotMiddleware = require('webpack-hot-middleware'),
        webpackDevConfig = require('./build/webpack.config.js');

    var compiler = webpack(webpackDevConfig);

    app.use(webpackDevMiddleware(compiler, {
        publicPath: webpackDevConfig.output.publicPath,
        noInfo: true,
        stats: {
            colors: true
        }
    }));

    app.use(webpackHotMiddleware(compiler));

    routerConfig(app, {
        dirPath: __dirname + '/server/routes/',
        map: {
            'index': '/',
            'api': '/api/*',
            'proxy': '/proxy/*'
        }
    });

    var reload = require('reload');
    var http = require('http');

    var server = http.createServer(app);
    reload(server, app);

    app.use(express.static(path.join(__dirname, 'public')));

    server.listen(port, function() {
        console.log('App (dev) is now running on port ' + port + '!');
    });
} else {
    routerConfig(app, {
        dirPath: __dirname + '/server/routes/',
        map: {
            'index': '/',
            'api': '/api/*',
            'proxy': '/proxy/*'
        }
    });
    app.use(express.static(path.join(__dirname, 'public')));

    app.listen(port, function() {
        console.log('App (dev) is now running on port ' + port + '!');
    });
}

supervisor

En la parte delantera que hemos logrado más de actualización caliente la parte delantera del archivo, pero modificar el archivo del servidor, no hace que el nodo se reiniciara automáticamente, por lo que utilizamos como supervisor de evento de modificación del archivo del supervisor al nodo de servicio se reiniciara automáticamente.
supervisor exige la instalación mundial

  npm install supervisor -g

Después de que la instalación se haya completado, podemos usar la línea de comandos
escribimos los comandos más utilizados en la package.json guiones, después de lo cual sólo se puede utilizar con la NGP plazo xxx

"scripts": {
    "dev": "export NODE_ENV=development && supervisor -w server,app.js app",
    "build": "node build/build.js",
    "start": "node app"
  },

node-supervisor de

supervisor [options] <program>

supervisor -w server,app.js app

es un elemento de configuración, que se utiliza para monitorear los cambios en el directorio o archivo especificado se pueden utilizar las opciones -w,
después de separada, supervisan varios directorios o archivos, este es el monitor de app.js directorio del servidor y el directorio raíz será cambiado a reiniciar nuestra aplicación expreso archivo de entrada.

Mi propia interpretación

En primer lugar, para explicar su código original es difícil de explicar algunos puntos:

getEntries este enfoque unificado es cargar nuestro propio archivo de entrada, de hecho, el contenido específico del artículo que he mencionado anteriormente, es ordenado, directorio de carpetas main.js es nuestro archivo de entrada, haciendo caso omiso de todas las otras razones también dijo que, una vez más, las disposiciones mueren, simple, conveniente y propicio para la cooperación.
publicPath = var ' http://0.0.0.0:7799/dist/ '; aquí razones publicPath y normalmente configurado webpack de publicPath no es lo mismo, es capaz de reconocer la necesidad absoluta direcciones Express, debido a que proyecto es mayor que webpack expreso a.
routerConfig Este método es un método de nuestra propia, el contenido del artículo mencionado anteriormente, es que escribí un método utilizado para cargar todas las rutas, a fin de no repetir escribir varios referencia. dirección de NPM
Tenga en cuenta que la exportación NODE_ENV = desarrollo, medio ambiente ventanas pueden fallar, puede ser reemplazado por el desarrollo a través del env = NODE_ENV

En segundo lugar, dijo que la razón para hacerlo en virtud

El artículo también menciona anteriormente, nuestra arquitectura front-end global actual es el uso de Nodo do capa media, entonces el problema es Nodo render capa será más alta que la capa webpack, y en muchos casos, no necesariamente utilizan el camino SPA, sea compatible con la arquitectura, por lo que Es necesario estas configuraciones.
Esta configuración también resuelve una serie de puntos débiles en nuestro desarrollo, un nodo que vuelve de forma automática, actualizar un archivo en caliente, se combinan básica que no es necesario que constantemente actualizar manualmente el navegador, y puede guardar el estado actual, que es clave Se puede ahorrar mucho tiempo para mejorar la eficiencia del desarrollo.
Por supuesto que hay puntos de dolor, por ejemplo, a más de un archivo de plantilla, y el directorio de archivos de acuerdo a las especificaciones, pero no para la representación.

Cómo crear un entorno de desarrollo front-end agradable (d)