のWebPACKと一緒に

Question

私は特急サーバーアプリにWebPACKのを接続する方法を説明したリソースを見つけるのに苦労しています動作しないExpressサーバ。私は書き込みが反応したときにES6を使用し、そのホット・モジュールと安価なモジュール・ソース・マップを使用するようにバベルのためのWebPACKを使用することを望みますよ。しかし、webpackはそれ自身の高速サーバーを実行しており、現在私のエクスプレスアプリと競合しています。明示的なアプリケーションでポートとルートを指定しても、Webpackを使用する利点があります。

アイデア？

急行アプリは、次のようになります。

私は一緒にサーバーのものを梱包WebPACKのを使用するための2つの異なる構成、1を使用したやってしまった何を

var express = require('express'), 
 
    Sequelize = require('sequelize'), 
 

 
/* 
 
set up sequelize ... 
 
    app.route ... 
 
*/ 
 

 
app.listen(port), function() { 
 
    console.log('Express server listening on port ' + port 
 
});

Answer 1

あなたが反応書くときにES2015を使用するバベルのためのWebPACKを使用し、そのホット・モジュールと安価なモジュール・ソース・マップを使用するようにWebPACKの-devのサーバーを必要としません。

開発ENVでアプリを反応させるのための

WebPACKの構成：

module.exports = { 
    entry: { 
    app: [ 
     'react-hot-loader/patch', 
     'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 
     'app/index.js, 
    ], 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
}) 

.babelrcは次のようになります。

{ 
    "presets": ["react", "es2015", "stage-0"], 
    "env": { 
    "development": { 
     "plugins": ["react-hot-loader/babel"] 
    } 
    } 
} 

app/index.js：

import { AppContainer} from 'react-hot-loader' 
... 
<AppContainer> 
    <App /> 
</AppContainer> 
... 
if (module.hot) { 
    module.hot.accept('./routes',() => { 
    // Hot reloading 
    }) 
} 

server/index.js：

0123ここで自分のレポを参照することができます場合

import webpack from 'webpack' 
import webpackDevMiddleware from 'webpack-dev-middleware' 
import webpackHotMiddleware from 'webpack-hot-middleware' 
import webpackConfig from './webpack.dev.config' 

const compiler = webpack(webpackConfig) 

app.use(webpackDevMiddleware(compiler, { 
    noInfo: true, 
    publicPath: webpackConfig.output.publicPath, 
})) 

app.use(webpackHotMiddleware(compiler, { 
    path: '/__webpack_hmr', 
    heartbeat: 10000, 
})) 

私はわからないが、私は反応して、エクスプレス、WebPACKの、HMRとバベルが統合されているかを確認するために私のGitHubのレポhereを確認してください。

Answer 2

、および1のためにすべてのブラウザのものを一緒に詰め込み、ホットリロード用のwebpack dev serverも実行します。別名今webpack.node.config.js

サーバーのWebPACKの設定は次のようになります。別名

var webpack = require('webpack'); 
var path = require('path'); 
var fs = require('fs'); 
var nodeModules = {}; 

// note the path.resolve(__dirname, ...) part 
// without it, eslint-import-resolver-webpack fails 
// since eslint might be invoked with different cwd 
fs.readdirSync(path.resolve(__dirname, 'node_modules')) 
    .filter(x => ['.bin'].indexOf(x) === -1) 
    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; }); 

// es5 style alternative 
// fs.readdirSync(path.resolve(__dirname, 'node_modules')) 
//  .filter(function(x) { 
//   return ['.bin'].indexOf(x) === -1; 
//  }) 
//  .forEach(function(mod) { 
//   nodeModules[mod] = 'commonjs ' + mod;  
//  }); 

module.exports = 

{ 
    // The configuration for the server-side rendering 
    name: 'server', 
    target: 'node', 
    entry: './app/server/serverEntryPrototype.js', 
    output: { 
     path: './bin/', 
     publicPath: 'bin/', 
     filename: 'serverEntryPoint.js' 
    }, 
    externals: nodeModules, 
    module: { 
     loaders: [ 
      { test: /\.js$/, 

       loaders: [ 
        // 'imports?document=this', 

        // 'react-hot', 
        'babel-loader' 
        //,'jsx-loader' 
       ] 
      }, 
      { test: /\.json$/, loader: 'json-loader' }, 
     ] 
    }, 
    plugins: [ 
    // new webpack.NormalModuleReplacementPlugin("^(react-bootstrap-modal)$", "^(react)$") 
    // new webpack.IgnorePlugin(new RegExp("^(react-bootstrap-modal)$")) 
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 
    ] 
}; 

ブラウザのWebPACKの設定は今webpack.browser.config.js次のようになります。

var webpack = require('webpack'); 
var path = require('path'); 
var buildPath = path.resolve(__dirname, 'assets'); 
var fs = require('fs'); 


var commonLoaders = [ 
    { test: /\.js$/, 

     loaders: [ 
      'react-hot', 
      'babel-loader' 
      //,'jsx-loader' 
     ] 
    } 
]; 


module.exports = 
{ 
    // Makes sure errors in console map to the correct file 
    // and line number 
    name: 'browser', 
    devtool: 'eval', 
    entry: [ 
     //'./bin/www.js', 
     './app/index.js', 
     'webpack/hot/dev-server', 
     'webpack-dev-server/client?http://localhost:8081' // WebpackDevServer host and port 
    ], 
    output: { 
     path: buildPath, 
     filename: '[name].js', 
     // Everything related to Webpack should go through a build path, 
     // localhost:3000/build. That makes proxying easier to handle 
     publicPath: 'http://localhost:8081/assets/' 
    }, 

    extensions: [ 
     '', 
     '.jsx', '.js', 
     '.json', 
     '.html', 
     '.css', '.styl', '.scss', '.sass' 
    ], 

    module: { 

     loaders: [ 
      // Compile es6 to js. 
      { 
       test: /app\/.*\.jsx?$/, 
       loaders: [ 
        'react-hot', 
        'babel-loader' 
       ] 
      }, 

      ///app\/.*\.json$/ 
      { test: /\.json$/, loader: 'json-loader' }, 

      // Styles 
      { test: /\.css$/, loader: 'style-loader!css-loader' }, 
      { test: /\.s(a|c)ss$/, loader: 'style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss!sass' }, 

      // Fonts 
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' }, 
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' } 

      //{ test: /\.png$/, loader: 'url-loader?limit=100000' }, 
      //{ test: /\.jpg$/, loader: 'file-loader' } 
     ], 

     plugins: [ 
      new webpack.HotModuleReplacementPlugin(), 
      new webpack.NoErrorsPlugin() 
     ] 
    }, 

    postcss: [ 
     require('autoprefixer-core') 
    ], 

    devtool: 'source-map' 
} 
;