Webpack 2とMultipage Express Webアプリケーション

Question

WebアプリケーションをASP.NETおよびjQueryからExpressおよびReactを使用してNode.jsに移行しています。我々は典型的なマルチページアプリケーション（MVC）を使用しており、我々はこのアーキテクチャに慣れていて、いくつかの特殊なケース（基本的にはSEO）で必要としています。

React Routerを使用せずにルートを維持したい場合は、Express MVC Routerを使用しますが、ReactでWebPack 2を使用します。

最初のステップでは、BackEndを移行していました（ほとんど完了しています）.2番目のパートは、フロントエンドをjQueryからReactに移行します（はい、UIライブラリのように反応します。私たちのページはあまり複雑ではなく、コンポーネントを再利用したいからです）。

WebPack 2のコード分割を使用して各ページ（jsファイル）ごとに複数のエントリを生成する必要があるMVC Expressルートを使用しているように、ライブリロード、プロダクションビルドjs

Entryライブラリ、ベンダー、一般的なWebPackを作成する例が1つありますが、server.js（Expressアプリケーション）との統合方法はわかりません。 ..

例のWebPACKの設定：

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

var config = { 
    entry: { 
    vendors: ['react', 'lodash'], 
    common: ['lodash'], 
    home: path.resolve(__dirname, './src/main'), 
    page1: path.resolve(__dirname, './src/page1'), 
    page2: path.resolve(__dirname, './src/page2'),  
    }, 
    output: { 
    path: path.join(__dirname, 'js'), 
    filename: '[name].bundle.js', 
    chunkFilename: '[id].chunk.js' 
    }, 
    devtool: 'source-map', 
    devServer: { 
    inline: true, 
    contentBase: './src', 
    port: 3000 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(true), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     output: { 
     comments: false 
     }, 
     compress: { 
     warnings: false, 
     screw_ie8: true 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
      names: ["common", "vendors"], 
      minChunks: Infinity 
     }) 

    ] 
} 

if (process.env.NODE_ENV === 'production') { 
    config.output.path = path.join(__dirname, 'dist/') 

    /* 
    Note: by default, React will be in development mode 
     see https://facebook.github.io/react/downloads.html 
    */ 
    config.plugins.push(new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': '"production"' 
    } 
    })) 
} 

module.exports = config 

私の質問は... Expressとライブリロードでこれを動作させることはできますか？ create-react-appと同じように？ MultipageアプリケーションとWebPackを一緒に使用する方法を説明するリンクやチュートリアル

ありがとうございます！

Answer 1

私はquickstart-express-reactの著者です。私たちは明らかに同様の課題に直面しているので、使用シナリオをよりよく説明するためにレポを更新しました。

基本的な考え方、あなたはMPAを構築するために探していると、「ジェネリック」の両方必要リロードして開発中のホットリロードを反応させている場合、あなたはプロキシとしてプログラム的browsersyncを使用することができ、そして - 非常に重要なこと実行webpack-dev-middleware & webpack-hot-middleware内部のブラウザ同期ではなく、あなたのウェブサイト/アプリケーションではありません。

私はこのシナリオを構築するために試行錯誤しましたので、GitHubでオープンソースにすることにしました。考慮すべき

他のもの：

• あなたが問題に直面している場合、そのレポ取引および更新に目を離さない、現時点ではすなわちwebpack@^2.2.1とreact-hot-loader@^3.0.0-beta.6最新のWebPACK &ローダー/プラグインを使用するように注意してください。
• もしあなたがASP.NETから来ているなら、おそらくVash template engineに興味があるでしょう。

IMO、現時点では、webpackとそのローダー/プラグインエコシステム全体が最先端で進化しています。これまでのように、現実的なワークフロー構成を構築することは狂気に近いものです。しかし、開発中に完全にリロードすることの利点は非常に大きいです。

狂気が変わって、webpack @ 2が最終的にベータ版から外れてしまったのではないかと思います。

・ホープ、このことができます、と

Answer 2

:-)潜在的に異なるアプローチの迅速な更新をレポ主演ありがとう - 私はquickstart-express-react 2ヶ月前に発表されたが、私はオープンマインドを維持したいと私は思いより良い開発者体験のための他の選択肢を研究しています。そして私はそれを見つけたかもしれない。

バックエンドの移植がほとんど完了したと書いているので、これはおそらく現在探しているものではありませんが、今後のプロジェクトでは、特に興味がある場合はnext.jsを確認してください。 in building isomorphic/universalリアクションアプリZEITのメンバーは、特にWebpackエコシステムの現在の状態を考慮して、開発ワークフロー全体を簡素化する素晴らしい仕事をしていると思います。私は現在、ユニバーサルを構築する健全な方法を探しています

はreact-toolbox componentsとウェブサイト/アプリが反応し、next.jsは、特に単一/独立した開発者や設定の完全な複雑さに対処するために望んでいない小さなチームのために、有望に見えるんウェブパックのシナリオを一から始める

彼らは素晴らしいクラウド展開ソリューションも提供していますが、next.jsは完全にオープンソース（MITライセンス）であり、あらゆるインフラストラクチャ上でdev/prodで使用できると言及する価値があります。

免責事項：私は現在、ZEITと提携しています。私が数日前にnext.jsに出くわしたとき、私はちょうど感激しました。:-)