2016-03-18 8 views
4

私は静的資産/ APIデータ呼び出しを処理する既存の高速サーバーを持っています。どのようにして、通常、この種の設定にwebpackを統合しますか?ホットモジュールを交換するには、Webpack開発サーバーを起動する必要がありますか? webpackにすべてのモジュールをバンドルさせて、既存のサーバーから静的資産を要求することによってホットモジュールを置き換える方法はありますか?webpack devモジュールを使用しないwebpackホットモジュールの交換?

ありがとうございます。ここで

答えて

5

はHMRに

server.js

 
var express = require('express') 
var app = express() 

var morgan = require('morgan') 

var env = app.get('env') 

if (env == 'development') { 
    var webpack = require('webpack') 
    var webpackDevMiddleware = require('webpack-dev-middleware') 
    var webpackHotMiddleware = require('webpack-hot-middleware') 

    var config = require('./webpack.config') 
    var compiler = webpack(config) 

    app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) 
    app.use(webpackHotMiddleware(compiler)) 
    app.use(morgan('dev')) 

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

app.listen(8080, function(error) { 
    if (error) { 
    console.error(error) 
    } else { 
    console.info("==> Listening on port %s. Open up http://localhost:%s/ in your browser.", 8080, 8080) 
    } 
}) 

とwebpack.config.js(私はかなり最小限それを残すために、いくつかの混乱を取り除く)

 
var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'webpack-hot-middleware/client', 
    './index', 
    ], 
    output: { 
    path: __dirname, 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     {test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react']} }, 
    ] 
    }, 
}; 
をして、私の最小限の急行設定です

これは、WebpackをExpressサーバーに組み込むのに十分な情報を提供するはずです。

+0

このような作業をするためには、すべてのフープを飛び越える必要はありません。 https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html –

関連する問題