インポートされたベンダーファイルをベンダーバンドルに分割する

Question

Webpackでは、異なるバンドルへのコード分割がサポートされています。オプションの1つは、スプリットポイントとして選択したいモジュールのセットを指定することです。

がhereから撮影：

var webpack = require("webpack"); 
 

 
module.exports = { 
 
    entry: { 
 
    app: "./app.js", 
 
    vendor: ["jquery", "underscore", ...], 
 
    }, 
 
    output: { 
 
    filename: "bundle.js" 
 
    }, 
 
    plugins: [ 
 
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js") 
 
    ] 
 
};

これはjqueryのようなモジュールを分割する方法を示しています。しかし、のような、より伝統的なセットアップで存在することができるnode_modulesではないいくつかのJavaScriptライブラリのために：私が望む何

/src /lib /vendor /fooLibrary fooLibrary.js fooLibrary.css

ベンダーバンドルにこれらのファイルを移動することですが、指定する方法を考え出すことはできませんこれらのファイルはベンダーのエントリポイントにあります。

Answer 1

あなたは

var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    app: "./server.js", 
    vendor: ["/mylib/"], 
    }, 
    output: { 
    filename: "bundle.js" 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js") 
    ] 
}; 

libにベンダー腹筋パスを設定し、WebPACKのベンダーバンドルへのABSパスからのlibを構築することができます。

しかしindex.jsが存在する場合、インポートにのみ働いていたので、あなたはWebPACKのコピープラグインでindex.jsまたはインスタンス一気タスクのいずれかのタスクのスクリプトを使用するベンダーファイルモジュールの名前を変更する必要があります前に。