[解決済み] バックエンドにWebpack？

質問

新しいプロジェクトでWebpackを使い始めましたが、今のところうまくいっています。私はほとんど私が前に使用したGruntよりもそれが好きだと言うでしょう。しかし、今、私は、どのように、または私のExpressバックエンドでそれを使用するべきか、かなり混乱しています？

私は、フロントエンド (ReactJS) とバックエンド (ExpressJS) を持つ 1 つのアプリを作成しています。アプリは Heroku で公開される予定です。今、私は ExpressJS とともに Webpack を使用して、1 つのコマンド (フロントエンドとバックエンド) でアプリを起動する必要があるように思います。

しかし、このブログ記事を書いた人は http://jlongster.com/Backend-Apps-with-Webpack--Part-I は、Webpack を使ってバックエンドの js ファイルをすべてバンドルしているようですが、これは本当に必要ないことだと私は考えています。なぜバックエンドのファイルをバンドルする必要があるのでしょうか？私は、バックエンドを実行し、バックエンドファイルの変更を監視し、Webpackの残りのパワーをフロントエンドにだけ使いたいと思います。

皆さんはどのようにフロントエンドをバンドルし、同時にバックエンドのnodejs部分を実行しているのでしょうか？あるいは、Webpackでバックエンドのファイルをバンドルする良い理由はありますか？

どのように解決するのですか？

nodeバックエンドでwebpackを使う理由

もし私たちが 反応する と ノード をビルドすることができます。 同型のリアクトアプリ . そして、もしあなたが import ES6 Modules in react app on client side it's ok - they are bundled by webpack on the client side.また、ES6 Modules in react app on client side it's ok - they are bundled by webpack on the client side.

しかし、問題はサーバー側で同じreactモジュールを使用している場合です。 ノードがES6モジュールをサポートしていないためです。 . この場合 require('babel/register'); を使うことができますが、これは実行時にコードをトランスパイルしてしまうので、効果的ではありません。この問題を解決する最も一般的な方法は、バックエンドをwebpackでパックすることです（すべてのコードがwebpackでトランスパイルされる必要はなく、この例のreactのような問題のあるコードだけがトランスパイルされます）。

同じことが JSX .

フロントエンドとバックエンドを同時にバンドルする

webpackの設定には、フロントエンド用とバックエンド用の2つの設定を配列で指定することができます。

webpack.config.js

const common = {
    module: {
        loaders: [ /* common loaders */ ]
    },
    plugins: [ /* common plugins */ ],
    resolve: {
        extensions: ['', '.js', '.jsx'] // common extensions
    }
    // other plugins, postcss config etc. common for frontend and backend
};

const frontend = {
     entry: [
         'frontend.js'
     ],
     output: {
        filename: 'frontend-output.js'
     }
     // other loaders, plugins etc. specific for frontend
};

const backend = {
     entry: [
         'backend.js'
     ],
     output: {
        filename: 'backend-output.js'
     },
     target: 'node',
     externals: // specify for example node_modules to be not bundled
     // other loaders, plugins etc. specific for backend
};

module.exports = [
    Object.assign({} , common, frontend),
    Object.assign({} , common, backend)
];

この設定を webpack --watch で始めると、2つのファイルを並行してビルドします。フロントエンド固有のコードを編集する場合は frontend-output.js だけが生成され、同じように backend-output.js . 一番良いのは、同型の反応部分を編集した場合、webpackは両方のファイルを一度にビルドすることです。

この チュートリアル で、nodeにwebpackを使う場合の説明があります(第4章)。