web-dev-qa-db-ja.com

バックエンド用のWebpack？

新しいプロジェクトにWebpackを使い始めたところ、今のところうまくいきました。以前使っていたGruntよりも好きだと思います。しかし今、私は非常に混乱しており、Expressバックエンドでそれを使用する必要がありますか？

フロントエンド（ReactJS）とバックエンド（ExpressJS）で1つのアプリを作成しています。アプリはHerokuで公開されます。今、ExpressJSでWebpackを使用して、1つのコマンド（フロントエンドとバックエンド）でアプリを起動して実行する必要があるようです。

しかし、このブログ投稿を書いた人 http://jlong​​ster.com/Backend-Apps-with-Webpack--Part-I は、すべてのバックエンドjsファイルをまとめるためにWebpackを使用しているようです。私の意見では本当に必要ありません。バックエンドファイルをバンドルする必要があるのはなぜですか？バックエンドを実行し、バックエンドファイルの変更を監視し、フロントエンドだけにWebpackの残りの機能を使用したいだけです。

フロントエンドをどのようにバンドルし、同時にバックエンドのnodejsパーツを実行しますか？または、バックエンドファイルをWebpackにバンドルする正当な理由はありますか？

node.jsherokuwebpack
52
Erik van de Ven

ノードバックエンドでwebpackを使用する理由

reactおよびnodeアプリについて説明している場合- 同形反応アプリ 。また、importES6モジュールをクライアント側の反応アプリで使用している場合は問題ありません-クライアント側のwebpackにバンドルされています。

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

JSXでも同じことが言えます。

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

ウェブパックの設定は、フロントエンド用とバックエンド用の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は両方のファイルを一度に構築します。

これで見つけることができます tutorial ノードにwebpackを使用する場合の説明（第4章）。

58
Everettss

Readmeから webpack-node-externals を使用できます。

npm install webpack-node-externals --save-dev

Webpack.config.jsで：

var nodeExternals = require('webpack-node-externals');

module.exports = {
    ...
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    ...
};
3
erandros