webpackにおけるダイナミックimport()パッケージ後のファイル名の定義

動的import()でファイルを包装したnameは0,1,2...で順次並べられています.例えば、0.js、1.jsなど、包装したいファイル名は包装前のファイル名です.これを実現するには、3つのステップが必要である.1.webpackプロファイルのoutputにchunkFilenameを追加する.名前のルールは自分のプロジェクトによって決められます.そのうち[name]はファイル名です.このブロックのより詳しい説明はここをクリックしてください.

//    ...
output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].[hash:8].js',
    chunkFilename: '[name].[hash:8].js',//  import   
},
//    ...

2.動的import()コードに注釈を追加するwebpackChunkNameは、webpackパッケージ化されたchunkの名前(注釈の内容が重要で、省略できません)をwebpackに教えます.ここで梱包した後のnameはMyFileです.

import(/* webpackChunkName: "MyFile" */`../containers/MyFile`)

3.大多数の場合、動的import()を使用してループによって行われるので、変数を導入しなければなりません.[request]を使用してwebpackに教えます.ここでの値は後から入ってきた文字列に基づいて決定されます.この例では変数pathNameの値です.具体的には以下のように.

import(/* webpackChunkName: "[request]" */`../containers/${pathName}`)