Webpackが外部にロードします。

Question

私はES6クラス（およびairbnb設定のESLint）でReactプロジェクトを開始しています。バンドルするにはwebpackが必要です。

私はReact tutorialで始まり、const React = require('react');とconst $ = require('jquery');を使ってみましたが、バンドルが15kbから700kbに​​増えたことに気付きました。私はjquery,reactとreact-domを<script/>タグで含めることにしました。

Hash: 082980fb232d17977e55 
Version: webpack 1.13.0 
Time: 869ms 
    Asset  Size Chunks    Chunk Names 
bundle.js 13.3 kB  0 [emitted] app 
    + 5 hidden modules 

しかし、私はconst React = require('react');を削除するとき、私は私のコードでエラーが発生します（例えば：リアクトJSXを使用するときにスコープ内になければなりません - 反応・イン・JSX-スコープ/反応）。 Iその後、Webpack's externalsに関するいくつかのドキュメントを読んで、これをやってみました：

module.exports = { 
    entry: { 
    app: './main.js', 
    }, 
    output: { 
    filename: 'bundle.js', 
    }, 
    externals: { 
    jquery: 'jQuery', 
    $: '$', 
    React: 'React', 
    ReactDOM: 'ReactDOM', 
    marked: 'marked', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     }, 
    ], 
    }, 
}; 

しかし、私はhereとhereそれがいけないを読んで、一方のWebPACKは、とにかく彼らがバンドルされています。

Hash: 6438094053346ce42228 
Version: webpack 1.13.0 
Time: 4975ms 
    Asset Size Chunks    Chunk Names 
bundle.js 709 kB  0 [emitted] app 
    + 172 hidden modules 

何が欠けていますか？

ありがとうございます！

Answer 1

webpackのCommonsChunkPluginを使用すると、すべての依存関係を別々のバンドルにバンドルできます。通常はすべての依存関係が必要です。