JSpackをバンドルしないようにWebpackを設定する

Question

Webpackを使用して、クライアント上で実行されるJSバンドルとサーバー上で実行されるJSバンドルの2つのセットを生成しています。サーバーの場合、私は希望のWebPACKは次のように任意のファイルを一緒にバンドルしない：私はwebpack-output-for-server/entry-point.jsを実行すると、

source/ 
    entry-point.js # requires component.js 
    component.js 

webpack-output-for-server/ 
    entry-point.js 
    component.js 

この方法は、潜在的にcomponent.jsで例外が発生し、ファイル名はに頼ることなく、スタックトレースに保存されていますソースマップ。一つの大きなバンドルを見るのではなく、生成されたソースコードを見るほうが簡単です。

Electronアプリでは、ElectronがCommonJS実装をrequire()で定義しているのと同じ方法でJSファイルをバンドルする必要はありません。私はまだホットリロードのような機能にWebpackを使用したいが、ファイルを一緒にバンドルしたくない。

Webpackにファイルをバンドルせず、ファイル名を保持するように指示する方法はありますか？

Answer 1

webpackの主な仕事は、javascriptをバンドルすることです。そのため、別々のファイルを管理する場合は、gulpを使用して、コメントに示唆されているようにファイルをコピーしてください。しかし、webpackはサーバからrequireになるcommonjs2バンドルを作成することができます。あなたのウェブパック構成がbabel変換、css modulesまたは他のwebpack機能がノードがネイティブに理解していないような機能を利用する場合は、これを使用します。

これを使用するには、サーバー用とクライアント用の2つのWebpack構成が必要です。 Webpackでは、これはオブジェクトの代わりに配列をエクスポートすることで実現します。例えば

：

var serverConfig = { 
    entry : './source/entry-point', 
    output : { 
     path: './webpack-output-for-server/', 
     library: 'your-app-name', 
     libraryTarget: 'commonjs2', 
     filename: 'your-app-name.js' 
    }, 
    module : { 
     ... 
    } 
}; 

var browserConfig = { 
    entry : './source/entry-point', 
    output : { 
     path: './public/', 
     filename: 'bundle.js' 
    }, 
    module : { 
     ... 
    } 
}; 

module.exports = [ 
    serverConfig, 
    browserConfig, 
]; 

この意志出力アプリケーションの2つのコピー、一方がブラウザのためにバンドルされるが、他のノードで使用することができる自己完結型commonjs2モジュールとしてバンドルします。私はElectronでこれを使用しようとしたことはありませんが、おそらくうまくいくでしょう。

Answer 2

Mobiusが提供する答えに間違いはありません。しかし、https://github.com/RickWong/react-isomorphic-starterkitを含む、GitHubで利用可能な一般的なテンプレートプロジェクトのいくつかを見てみることをお勧めします。このテンプレートは非常に人気があり、多くの活動をしています。

Webpackの設定はconfigsフォルダにあります。彼らは何をやったことは2つのフォルダに二つの別々の構成を作成し、それらをクライアントとサーバースクリプトバンドルに加えて、あなたが他の富を見つけることができます

"scripts": { 
    "start": "forever --minUptime 1000 --spinSleepTime 1000 -c \"node --harmony\" ./dist/server.js", 
    "build-server": "webpack --colors --display-error-details --config configs/webpack.server.js", 
    "build-client": "webpack --colors --display-error-details --config configs/webpack.client.js", 
    "build": "concurrently \"npm run build-server\" \"npm run build-client\"", 
    "watch-server": "webpack --watch --verbose --colors --display-error-details --config configs/webpack.server-watch.js", 
    "watch-server-start": "node node_modules/just-wait --pattern \"dist/*.js\" && npm run start", 
    "watch-client": "webpack-dev-server --config configs/webpack.client-watch.js", 
    "watch": "concurrently --kill-others \"npm run watch-server-start\" \"npm run watch-server\" \"npm run watch-client\"" 
} 

package.jsonで定義されたスクリプトを経由して同時に構築されています本当に開発に役立つこのテンプレートの機能キースクリプトはnpm run watchで、開発サーバーを実行して、変更が反映されるようにします。