WebPack 4 - ベンダーチャンクを作成します -- node.js フィールド と webpack フィールド と code-splitting フィールド と webpack-4 フィールド 関連 問題

Webpack 4 - create vendor chunk












61
vote

問題

日本語

WebPACK 3構成では、以下のコードを使用して別の<コード> public class Bubble extends View implements View.OnClickListener { private static final boolean BUBBLING = true; //thread is running to draw private Paint paint; private ShapeDrawable bubble; // coordiantes, radius etc private int x; private int y; private int r; private int w = 200; private int h = 200; //handler to invalidate (force redraw on main GUI thread from this thread) private Handler handler = new Handler(); public Bubble(Context context) { super(context); x = w/2; y = h/2; r = w/2; bubble = new ShapeDrawable(new OvalShape()); bubble.getPaint().setColor(Color.BLUE); bubble.setBounds(0, 0, r, r); paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(0); } @Override protected void onSizeChanged (int w, int h, int oldw, int oldh){ //set bubble parameters (center, size, etc) startAnimation(); } public void startAnimation(){ new Thread(new Runnable() { public void run() { while (BUBBLING) { moveBubble(); try { Thread.sleep(50); } catch (InterruptedException e) { } //update by invalidating on main UI thread handler.post(new Runnable() { public void run() { invalidate(); } }); } } }).start(); } @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); // draws bubble on canvas } private void moveBubble(){ x = x + 1; y = y + 1; } @Override public void onClick(View v) { Toast.makeText(this.getContext(), "Tapped on screen", Toast.LENGTH_LONG).show(); } } 0

を作成します。 <事前> <コード> public class Bubble extends View implements View.OnClickListener { private static final boolean BUBBLING = true; //thread is running to draw private Paint paint; private ShapeDrawable bubble; // coordiantes, radius etc private int x; private int y; private int r; private int w = 200; private int h = 200; //handler to invalidate (force redraw on main GUI thread from this thread) private Handler handler = new Handler(); public Bubble(Context context) { super(context); x = w/2; y = h/2; r = w/2; bubble = new ShapeDrawable(new OvalShape()); bubble.getPaint().setColor(Color.BLUE); bubble.setBounds(0, 0, r, r); paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(0); } @Override protected void onSizeChanged (int w, int h, int oldw, int oldh){ //set bubble parameters (center, size, etc) startAnimation(); } public void startAnimation(){ new Thread(new Runnable() { public void run() { while (BUBBLING) { moveBubble(); try { Thread.sleep(50); } catch (InterruptedException e) { } //update by invalidating on main UI thread handler.post(new Runnable() { public void run() { invalidate(); } }); } } }).start(); } @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); // draws bubble on canvas } private void moveBubble(){ x = x + 1; y = y + 1; } @Override public void onClick(View v) { Toast.makeText(this.getContext(), "Tapped on screen", Toast.LENGTH_LONG).show(); } } 1

すべての変更を伴うWebPACK 4との方法がわかりません4. <コード> public class Bubble extends View implements View.OnClickListener { private static final boolean BUBBLING = true; //thread is running to draw private Paint paint; private ShapeDrawable bubble; // coordiantes, radius etc private int x; private int y; private int r; private int w = 200; private int h = 200; //handler to invalidate (force redraw on main GUI thread from this thread) private Handler handler = new Handler(); public Bubble(Context context) { super(context); x = w/2; y = h/2; r = w/2; bubble = new ShapeDrawable(new OvalShape()); bubble.getPaint().setColor(Color.BLUE); bubble.setBounds(0, 0, r, r); paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(0); } @Override protected void onSizeChanged (int w, int h, int oldw, int oldh){ //set bubble parameters (center, size, etc) startAnimation(); } public void startAnimation(){ new Thread(new Runnable() { public void run() { while (BUBBLING) { moveBubble(); try { Thread.sleep(50); } catch (InterruptedException e) { } //update by invalidating on main UI thread handler.post(new Runnable() { public void run() { invalidate(); } }); } } }).start(); } @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); // draws bubble on canvas } private void moveBubble(){ x = x + 1; y = y + 1; } @Override public void onClick(View v) { Toast.makeText(this.getContext(), "Tapped on screen", Toast.LENGTH_LONG).show(); } } 2 が削除されたため、それを実現するためのさまざまな方法があります。 このチュートリアルですが、ランタイムチャンクを抽出して正しく定義することについてはまだわからない<コード> public class Bubble extends View implements View.OnClickListener { private static final boolean BUBBLING = true; //thread is running to draw private Paint paint; private ShapeDrawable bubble; // coordiantes, radius etc private int x; private int y; private int r; private int w = 200; private int h = 200; //handler to invalidate (force redraw on main GUI thread from this thread) private Handler handler = new Handler(); public Bubble(Context context) { super(context); x = w/2; y = h/2; r = w/2; bubble = new ShapeDrawable(new OvalShape()); bubble.getPaint().setColor(Color.BLUE); bubble.setBounds(0, 0, r, r); paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(0); } @Override protected void onSizeChanged (int w, int h, int oldw, int oldh){ //set bubble parameters (center, size, etc) startAnimation(); } public void startAnimation(){ new Thread(new Runnable() { public void run() { while (BUBBLING) { moveBubble(); try { Thread.sleep(50); } catch (InterruptedException e) { } //update by invalidating on main UI thread handler.post(new Runnable() { public void run() { invalidate(); } }); } } }).start(); } @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); // draws bubble on canvas } private void moveBubble(){ x = x + 1; y = y + 1; } @Override public void onClick(View v) { Toast.makeText(this.getContext(), "Tapped on screen", Toast.LENGTH_LONG).show(); } } 3 プロパティ。

編集: 残念ながら、私はここで最も人気のある回答の問題を経験していました。チェックアウト私の答え。

英語

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk:

entry: {     client: ['./client.js'],     vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], },  output: {   filename: '[name].[chunkhash].bundle.js',   path: '../dist',   chunkFilename: '[name].[chunkhash].bundle.js',   publicPath: '/', },  plugins: [     new webpack.HashedModuleIdsPlugin(),     new webpack.optimize.CommonsChunkPlugin({       name: 'vendor',     }),     new webpack.optimize.CommonsChunkPlugin({       name: 'runtime',     }), ], 

With all the changes I'm not sure how to do it with Webpack 4. I know that CommonChunksPlugin was removed, so there is a different way to achieve that. I've also read this tutorial but I'm still not sure about extracting runtime chunk and properly defining output property.

EDIT: Unfortunately, I was experiencing issues with the most popular answer here. Check out my answer.

</div
           

回答リスト

42
 
vote

ベンダーJSバンドルサイズを小さくするために。ノードモジュールパッケージをさまざまなバンドルファイルに分割できます。私はこれを参照しました blog for. WebPackによって生成されたかさばるベンダーファイルを分割します。私が最初に使ったそのリンクの趣味:

<事前> <コード> optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, name(module) { // get the name. E.g. node_modules/packageName/not/this/part.js // or node_modules/packageName const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1]; // npm package names are URL-safe, but some servers don't like @ symbols return `npm.${packageName.replace('@', '')}`; }, }, }, }, }

複数のパッケージとチャンクを異なるバンドルにまとめたい場合は、次のgistを参照してください。

<事前> <コード> optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { reactVendor: { test: /[\/]node_modules[\/](react|react-dom)[\/]/, name: "reactvendor" }, utilityVendor: { test: /[\/]node_modules[\/](lodash|moment|moment-timezone)[\/]/, name: "utilityVendor" }, bootstrapVendor: { test: /[\/]node_modules[\/](react-bootstrap)[\/]/, name: "bootstrapVendor" }, vendor: { test: /[\/]node_modules[\/](!react-bootstrap)(!lodash)(!moment)(!moment-timezone)[\/]/, name: "vendor" }, }, }, }
 

In order to reduce the vendor js bundle size. We can split the node module packages into different bundle file. I referred this blog for splitting the bulky vendor file generated by webpack. Gist of that link which I used initially:

optimization: {    runtimeChunk: 'single',    splitChunks: {     chunks: 'all',     maxInitialRequests: Infinity,     minSize: 0,     cacheGroups: {       vendor: {         test: /[\/]node_modules[\/]/,         name(module) {         // get the name. E.g. node_modules/packageName/not/this/part.js         // or node_modules/packageName         const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];        // npm package names are URL-safe, but some servers don't like @ symbols       return `npm.${packageName.replace('@', '')}`;       },     },   },  }, } 

If one wants to group multiple packages and chunk then into different bundles then refer following gist.

optimization: { runtimeChunk: 'single',   splitChunks: {     chunks: 'all',     maxInitialRequests: Infinity,     minSize: 0,     cacheGroups: {       reactVendor: {         test: /[\/]node_modules[\/](react|react-dom)[\/]/,         name: "reactvendor"       },       utilityVendor: {         test: /[\/]node_modules[\/](lodash|moment|moment-timezone)[\/]/,         name: "utilityVendor"       },       bootstrapVendor: {         test: /[\/]node_modules[\/](react-bootstrap)[\/]/,         name: "bootstrapVendor"       },       vendor: {          test: /[\/]node_modules[\/](!react-bootstrap)(!lodash)(!moment)(!moment-timezone)[\/]/,       name: "vendor"     },     },   }, } 
</div
 
 
     
     
27
 
vote

ここにはいくつかの例があります: https://github.com/webpack/webpack/tree/master/examples

あなたの例に基づいて、これはこれが次のように翻訳されていると思います:

<事前> <コード> // mode: "development || "production", entry: { client: './client.js', }, output: { path: path.join(__dirname, '../dist'), filename: '[name].chunkhash.bundle.js', chunkFilename: '[name].chunkhash.bundle.js', publicPath: '/', }, optimization: { splitChunks: { cacheGroups: { vendor: { chunks: 'initial', name: 'vendor', test: 'vendor', enforce: true }, } }, runtimeChunk: true }
 

There are a few examples located here: https://github.com/webpack/webpack/tree/master/examples

Based on your example i believe this translate to:

// mode: "development || "production", entry: {   client: './client.js', }, output: {   path: path.join(__dirname, '../dist'),   filename: '[name].chunkhash.bundle.js',   chunkFilename: '[name].chunkhash.bundle.js',   publicPath: '/', }, optimization: {   splitChunks: {     cacheGroups: {       vendor: {         chunks: 'initial',         name: 'vendor',         test: 'vendor',         enforce: true       },     }   },   runtimeChunk: true } 
</div
 
 
         
         
24
 
vote

エントリプロパティからベンダーを削除し、そのような最適化プロパティを設定することができます...

<事前> <コード> entry: { client: './client.js' }, output: { path: path.join(__dirname, '../dist'), filename: '[name].chunkhash.bundle.js', chunkFilename: '[name].chunkhash.bundle.js', publicPath: '/', }, optimization: { splitChunks: { cacheGroups: { vendor: { test: /node_modules/, chunks: 'initial', name: 'vendor', enforce: true }, } } }

このソースをチェックする WebPackの例

 

You could remove vendor out of the entry property and set the optimization property like so...

entry: {  client: './client.js' },  output: {  path: path.join(__dirname, '../dist'),  filename: '[name].chunkhash.bundle.js',  chunkFilename: '[name].chunkhash.bundle.js',  publicPath: '/', },  optimization: {   splitChunks: {    cacheGroups: {     vendor: {      test: /node_modules/,      chunks: 'initial',      name: 'vendor',      enforce: true     },    }   }   } 

Check this source webpack examples

</div
 
 
         
         
21
 
vote

Vendors Runtime を区別するには、 optimization オプションを使用する必要があります。

可能なウェブパック4設定:

<事前> <コード> // mode: 'development' | 'production' | 'none' entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename: '[name].[chunkhash].bundle.js', path: '../dist', chunkFilename: '[name].[chunkhash].bundle.js', publicPath: '/', }, optimization: { runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, name: 'vendors', enforce: true, chunks: 'all' } } } }

W4に関する詳細情報は、この webpack-demo 。

また、 optimization.splitChunks.chunks プロパティを 9988777667 に変更することもできます。続きを読むここ

注: optimization.splitChunks を介して設定できます。例では、概要では、概要では概要ではChunksについて説明しますが、 optimization.splitChunks.chunks: "all" は最初のチャンクにも当てはまります。

 

In order to separate the vendors and the runtime you need to use the optimization option.

Possible Webpack 4 configuration:

// mode: 'development' | 'production' | 'none'  entry: {     client: ['./client.js'],     vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], },  output: {     filename: '[name].[chunkhash].bundle.js',     path: '../dist',     chunkFilename: '[name].[chunkhash].bundle.js',     publicPath: '/', },  optimization: {     runtimeChunk: 'single',     splitChunks: {         cacheGroups: {             vendor: {                 test: /[\/]node_modules[\/]/,                 name: 'vendors',                 enforce: true,                 chunks: 'all'             }         }     } } 

More info related with W4 can be found in this Webpack-Demo.

Also, you can achieve the same changing the optimization.splitChunks.chunks property to "all". Read more here

Note: You can configure it via optimization.splitChunks. The examples say something about chunks, by default it only works for async chunks, but with optimization.splitChunks.chunks: "all" the same would be true for initial chunks.

</div
 
 
   
   
16
 
vote

しばらく後、この構成を見つけたことがわかりました:

<事前> <コード> entry: { vendor: ['@babel/polyfill', 'react', 'react-dom', 'redux'], client: './client.js', }, optimization: { splitChunks: { cacheGroups: { vendor: { chunks: 'initial', name: 'vendor', test: 'vendor', enforce: true }, } }, runtimeChunk: true }

は、ブラウザの非互換性エラーを引き起こしていた @babel/polyfill をロードすることができませんでした...それで最近私は WebPack Documentation を更新し、 @babel/polyfill

を正しくロードしていた明示的なベンダーチャンクを作成する方法 <事前> <コード> const moduleList = ["@babel/polyfill", "react", "react-dom"]; ... entry: { client: ["@babel/polyfill", "../src/client.js"] } optimization: { runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { test: new RegExp( `[\/]node_modules[\/](${moduleList.join("|")})[\/]` ), chunks: "initial", name: "vendors", enforce: true } } } }

all を作成し、 splitChunks.cacheGroups.vendor.test で指定します。モジュールは Vendor チャンクに分割する必要があります。

    splitchunksplugin 。
  • ウェブパックガイドキャッシング
  • webpack著者応答同じ問題

それでも、これが100%正しいかどうか、あるいはこれが文字通り最も混乱していることの1つであるので、それが改善された場合はよくわかりません。しかし、これはドキュメンテーションに最も近いようです、私はそれらをと一緒に調べるときに正しいチャンクを作成するようです。 WebPack-Bundle-Analyzer (変更されたチャンクのみが更新され、残りの部分のみがビルド間で同じままにします)、 polyfill の問題を修正します。

 

After some time I found out that this configuration:

entry: {   vendor: ['@babel/polyfill', 'react', 'react-dom', 'redux'],   client: './client.js', }, optimization: {   splitChunks: {     cacheGroups: {       vendor: {         chunks: 'initial',         name: 'vendor',         test: 'vendor',         enforce: true       },     }   },   runtimeChunk: true } 

was failing to somehow to load @babel/polyfill which was causing browser incompatibility errors... So recently I looked up to the updated webpack documentation and found a way to create explicit vendor chunk that was properly loading @babel/polyfill:

const moduleList = ["@babel/polyfill", "react", "react-dom"]; ...    entry: {     client: ["@babel/polyfill", "../src/client.js"]   }   optimization: {     runtimeChunk: "single",     splitChunks: {       cacheGroups: {         vendor: {           test: new RegExp(             `[\/]node_modules[\/](${moduleList.join("|")})[\/]`           ),           chunks: "initial",           name: "vendors",           enforce: true         }       }     }   } 

Notice that I create one entry with all of the code included and then I specify with splitChunks.cacheGroups.vendor.test which modules should be split out to the vendor chunk.

  • Webpack documentation on SplitChunksPlugin.
  • Webpack guide on caching
  • Webpack author answer on the same problem

Still, I'm not sure if this is 100% correct or if it could be improved as this is literally one of the most confusing things ever. However, this seems to be closest to the documentation, seems to produce correct chunks when I inspect them with webpack-bundle-analyzer (only updates the chunks that were changed and rest of them stays the same across builds) and fixes the issue with polyfill.

</div
 
 
       
       
7
 
vote

あなたがこれを行うならば、

<事前> <コード> optimization: { splitChunks: { chunks: 'all', }, runtimeChunk: true, }

<コード> vendors~ および<コード> runtime~ チャンクを作成します。 SOKRAは<コード> splitChunks のデフォルトです。

<事前> <コード> splitChunks: { chunks: "async", minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, name: true, cacheGroups: { default: { minChunks: 2, priority: -20 reuseExistingChunk: true, }, vendors: { test: /[\/]node_modules[\/]/, priority: -10 } } } @babel/polyfill0 998877611 バンドルにすでに含まれている

。テストでは、<コード> @babel/polyfill2 Bundleが表示されていません。

これらのファイルを含めるための予想されるワークフローが何であるかわかりませんが、PHPでこのヘルパー機能を書きました:

<事前> <コード> @babel/polyfill3

私の資産プラグイン(WP4用に更新された):

<事前> <コード> @babel/polyfill4

これはすべて唾を吐くものです:

<事前> <コード> @babel/polyfill5

私のカスタムJSファイルの1つを変更すると、それらのJSチャンクのうちの1つだけが変更されます。ランタイムまたはベンダーバンドルも更新する必要はありません。

i add 新しいJSファイルと @babel/polyfill6 の場合、ランタイムはまだ更新されません。新しいファイルがメインバンドルにコンパイルされるだけであるため、動的にインポートされていないため、マッピングに参加する必要はありません。 @babel/polyfill7 は、ランタイムが更新されます。ベンダーバンドルも変更されているように見えます - 私はなぜ確信がわかりません。私はそれが避けられるべきだと思いました。

私もファイルごとのハッシュの方法を考え出していません。 .cssファイルと同じチャンクである.jsファイルを変更すると、それらのファイル名は両方とも @babel/polyfill8 で変わります。


上記の資産プラグインを更新しました。 @babel/polyfill9 タグが重要かもしれない順番であると思います...これは、その順序がafaict:

を維持します。 <事前> <コード> @babel/polyfill0
 

I think if you do this:

optimization: {     splitChunks: {         chunks: 'all',     },     runtimeChunk: true, } 

It will create a vendors~ and runtime~ chunk for you. Sokra said the default for splitChunks is this:

splitChunks: {     chunks: "async",     minSize: 30000,     minChunks: 1,     maxAsyncRequests: 5,     maxInitialRequests: 3,     name: true,     cacheGroups: {         default: {             minChunks: 2,             priority: -20             reuseExistingChunk: true,         },         vendors: {             test: /[\/]node_modules[\/]/,             priority: -10         }     } } 

Which already includes a vendors and default bundle. In testing, I haven't seen a default bundle appear.

I don't know what the expected workflow for including these files is, but I wrote this helper function in PHP:

public static function webpack_asset($chunkName, $extensions=null, $media=false) {     static $stats;     if($stats === null) {         $stats = WxJson::loadFile(WX::$path.'/webpack.stats.json');     }     $paths = WXU::array_get($stats,['assetsByChunkName',$chunkName],false);     if($paths === false) {         throw new Exception("webpack asset not found: $chunkName");     }     foreach($stats['assetsByChunkName'] as $cn => $files) {         if(self::EndsWith($cn, '~' . $chunkName)) {             // prepend additional supporting chunks             $paths = array_merge($files, $paths);         }     }     $html = [];     foreach((array)$paths as $p) {         $ext = WXU::GetFileExt($p);         if($extensions) {             if(is_array($extensions)) {                 if(!in_array($ext,$extensions)) {                     continue;                 }             } elseif(is_string($extensions)) {                 if($ext !== $extensions) {                     continue;                 }             } else {                 throw new Exception("Unexpected type for $extensions: ".WXU::get_type($extensions));             }         }         switch($ext) {             case 'js':                 $html[] = WXU::html_tag('script',['src'=>$stats['publicPath'].$p,'charset'=>'utf-8'],'');                 break;             case 'css':                 $html[] = WXU::html_tag('link',['href'=>$stats['publicPath'].$p,'rel'=>'stylesheet','type'=>'text/css','media'=>$media],null); // "charset=utf-8" doesn't work in IE8                 break;         }     }     return implode(PHP_EOL, $html); } 

Which works with my assets plugin (updated for WP4):

{     apply: function(compiler) {         //let compilerOpts = this._compiler.options;         compiler.plugin('done', function(stats, done) {             let assets = {};             stats.compilation.namedChunks.forEach((chunk, name) => {                 assets[name] = chunk.files;             });              fs.writeFile('webpack.stats.json', JSON.stringify({                 assetsByChunkName: assets,                 publicPath: stats.compilation.outputOptions.publicPath             }), done);         });     } }, 

All of this spits out something like:

<script src="/assets/runtime~main.a23dfea309e23d13bfcb.js" charset="utf-8"></script> <link href="/assets/chunk.81da97be08338e4f2807.css" rel="stylesheet" type="text/css"/> <script src="/assets/chunk.81da97be08338e4f2807.js" charset="utf-8"></script> <link href="/assets/chunk.b0b8758057b023f28d41.css" rel="stylesheet" type="text/css"/> <script src="/assets/chunk.b0b8758057b023f28d41.js" charset="utf-8"></script> <link href="/assets/chunk.00ae08b2c535eb95bb2e.css" rel="stylesheet" type="text/css" media="print"/> 

Now when I modify one of my custom JS files, only one of those JS chunks changes. Neither the runtime nor the vendors bundle needs to be updated.

If I add a new JS file and require it, the runtime still isn't updated. I think because the new file will just be compiled into the main bundle -- it doesn't need to be in the mapping because it's not dynamically imported. If I import() it, which causes code-splitting, then the runtime gets updated. The vendors bundle also appears to have changed -- I'm not sure why. I thought that was supposed to be avoided.

I also haven't figured out how to do per-file hashes. If you modify a .js file which is the same chunk as a .css file, both their filenames will change with [chunkhash].


I updated the assets plugin above. I think the order in which you include the <script> tags might matter... this will maintain that order AFAICT:

const fs = require('fs');  class EntryChunksPlugin {      constructor(options) {         this.filename = options.filename;     }      apply(compiler) {         compiler.plugin('done', (stats, done) => {             let assets = {};              // do we need to use the chunkGraph instead to determine order??? https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#gistcomment-2381967             for(let chunkGroup of stats.compilation.chunkGroups) {                 if(chunkGroup.name) {                     let files = [];                     for(let chunk of chunkGroup.chunks) {                         files.push(...chunk.files);                     }                     assets[chunkGroup.name] = files;                 }             }              fs.writeFile(this.filename, JSON.stringify({                 assetsByChunkName: assets,                 publicPath: stats.compilation.outputOptions.publicPath             }), done);         });     } }  module.exports = EntryChunksPlugin; 
</div
 
 
 
 
2
 
vote

エントリファイルの順序も問題になっているようです。ベンダーの前にclient.jsがあるので、あなたのメインアプリの前にバンドリングはベンダーの起こりません。

<事前> <コード> entry: { vendor: ['react', 'react-dom', 'react-router'], app: paths.appIndexJs },

splitchunks 最適化出力ファイル名を指定し、エントリ名のベンダーを次のように指定できます。

<事前> <コード> optimization: { splitChunks: { cacheGroups: { // match the entry point and spit out the file named here vendor: { chunks: 'initial', name: 'vendor', test: 'vendor', filename: 'vendor.js', enforce: true, }, }, }, },
 

It seems the order of entry files also matter. Since you have client.js before vendor, the bundling doesn't happen of vendor before your main app.

entry: {  vendor: ['react', 'react-dom', 'react-router'],  app: paths.appIndexJs }, 

Now with the SplitChunks optimisation you can specify the output file name and refer to the entry name vendor as:

optimization: {  splitChunks: {   cacheGroups: {     // match the entry point and spit out the file named here     vendor: {       chunks: 'initial',       name: 'vendor',       test: 'vendor',       filename: 'vendor.js',       enforce: true,     },   },  }, }, 
</div
 
 
2
 
vote

これを行うにははるかに短い方法を見つけました:

<事前> <コード> optimization: { splitChunks: { name: 'vendor', chunks: 'all' } }

splitChunks.name が文字列として与えられている場合、 Documentation alw stringまたは同じ文字列を返す関数を指定すると、すべての共通モジュールとベンダーを単一のチャンクにマージします。" <コード> splitChunks.chunks 、<コード> splitChunks.chunksすべての依存関係を抽出します。

 

I found a much shorter way to do this:

optimization: {   splitChunks: { name: 'vendor', chunks: 'all' } } 

When splitChunks.name is given as a string, the documentation says: "Specifying either a string or a function that always returns the same string will merge all common modules and vendors into a single chunk." In combination with splitChunks.chunks, it will extract all dependencies.

</div
 
 

関連する質問

1  JEST / RECOT - TYPEERROR:未定義のプロパティ 'TouchStart'を読み取ることができません  ( Jest react typeerror cannot read property touchstart of undefined ) 
私は、反応、ウェブパック、およびJEST /酵素をテストするためのプロジェクトを作成しました。 WebPackでは、 "modulenameMapper"内のJEST.config.jsにも同じファイルのエイリアスを追加しました。 しかし、テストの実行中にエラ...

0  WebPACK Chunksのロードは無視されますか?  ( Why webpack chunks load is ignored devserver port ) 
React.Alazyで動的インポートを使用しようとしています。コードは非常に単純です <事前> <コード> import React, { Component, Suspense, lazy, } from 'react'; const BlazyCom...

3  WebPack 4に2つのエントリのうちの1つを分割する方法?  ( How to code split one of two entries in webpack 4 ) 
私は私がWebPack 4に移行するのに問題があるという一見かなり簡単なWebPackコード分割設定を持っています.4。 main と呼ばれる2つのエントリがあります。 main のベンダーモジュールの<コード> vendor チャンクに初期コード分割した...

2  WebPack 4 HTMLファイルから画像をロードしていません  ( Webpack 4 not loading images from html files ) 
何らかの理由で私のWebPackの設定は、SCSSファイルからの画像のロード中ですが、HTMLファイルからのものではありません。また、Prodアーカイブを配信するためにビルドコマンドを実行すると、「IMG」フォルダは作成されません。正直になるように私はWebP...

3  反応しますウェブパックprocess.env.node_env == azureで未定義  ( React webpack getting process env node env undefined on azure ) 
Buildの作成中にnode_envを設定するには、package.jsonのスクリプト以下のスクリプトを使用します。 <事前> <コード> "scripts": { "build-dev": "set NODE_ENV=development &&...

1  MQTT.JSとWebPACK - 「WSはコンストラクタではありません」  ( Mqtt js and webpack ws is not a constructor ) 
MQTT.JSを使用している私たちのマイクロサービスの1つを束ねようとしています、そして私は本当に奇妙な問題に苦しんでいます。 バンドすることなく機能しているので、<コード> node_modules の ws が利用可能です。 問題と思うもの: エラー:...

3  WebPack 4 Pug LoaderイメージURLが正しくありません  ( Webpack 4 pug loader image url not correct ) 
PUG Loader 埋め込みリソース すべての埋め込みリソースに必要なものを使用してみて、WebPackで処理します。 <事前> <コード> div img(src=require("./my/image.png")) とそれは私のイメー...

0  WebPack:スクリプトWebPack:Dev  ( Webpack missing script webpackdev ) 
WebPackを使用してWebプロジェクトに埋め込まれているAureliaプロジェクトを備えたソリューションを持っています。 ウェブパックのバージョンは4.41.2です WebPACK-CLIバージョンは3.3.10 です。 WebPackはアンインストー...

9  WebPackを使用してコンパイル時にファイルを置き換える方法は?  ( How can i replace files at compile time using webpack ) 
私は微儀式な構成のプロジェクトを持っています。最初の設定は、いくつかの開発設定を含む config.dev.js ファイルです。開発モードで使用します。 2番目の設定は config.js ファイルです。私はそれを製造モードで使っています。 インポートを使用...

1  角度7 +ウェブパック4を備えたカプセル化されたCSS  ( Encapsulated css with angular 7 webpack 4 ) 
私はハイブリッド環境1.xと角度7ルートの両方を備えた環境。 Angular 1.xルートは古いブートストラップ3を使用していますが、角度7はブートストラップ4を使用する必要があります。 IT をインポートすることで、ブートストラップ4のみをカプセル化しようと...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有