Webpack での多対多構成の実装 (コードが添付されています)

この記事の内容は、Webpack での多対多構成の実装に関するものです (コード付き)。必要な方は参考にしていただければ幸いです。

Webpack は、sass、画像、フォントなどのすべての静的リソースを js にパッケージ化できる優れたパッケージング プラットフォームです。

作者は最近、http リクエストを減らすために、従来の静的 Web サイトを変換しています。戦略の 1 つは、静的 Web ページに対応する複数の静的リソース (フォント、CSS、画像、js など) を 1 つのパッケージ化して js ファイルに出力し、各 html を対応する独立した js に関連付けることです。

インターネットでwebpackを見つけました 設定情報に関して、htmlとjsの対応関係は「1対1」と「多対1」ですが、「多対多」の実装は少ないです

でもいくつかの試行錯誤の後、最終的に設定しました。これが設定ファイルに関連する構文です

//entry入口文件支持json的形式
    entry: {
            "static/pc/js/index": "./webStatic/pc/js/index.js",        
            "static/pc/js/article-details": "./webStatic/pc/js/article-details.js",        
            "static/mobile/js/index": "./webStatic/mobile/js/index.js",        
            "static/mobile/js/article-details": "./webStatic/mobile/js/article-details.js"
    },
    output: {
        path: path.resolve(__dirname, ''),        
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        filename: '[name].js'
    }

設定手順

webStatic はルート ディレクトリ内のソース コードが配置される場所、static は js が出力される場所ですはルート ディレクトリに配置されます

設定ファイルには合計 4 つのマッピングがあります: webStatic /pc/js/index.js は static/pc/js/index.js に出力され、./webStatic/pc/js/article- .details.js に出力され、static/pc/js/article-details.js、./webStatic /mobile/js/index.js は static/mobile/js/index.js、./webStatic/mobile/js/ に出力されます。 Article-details.js は static/mobile/js/article-details.js に出力されます

後で追加します 他のマッピングについては、エントリの形式に従って追加するだけです (コピーするだけです)

概要:

維持するため古い W​​eb サイトでは、react または vue コンポーネントを使用してすべてのページを短時間で書き直すことは現実的ではありませんが、複数の入口と複数の出口を備えた webpack を構成した後は、いくつかのページを作成するだけで済みます。

関連する推奨事項:

webpack によって実装されたマルチエントリ プロジェクトのスキャフォールディング

webpack マルチエントリ ファイル ページの詳細な説明。梱包

以上がWebpack での多対多構成の実装 (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。