webpack多入口多出口の実現方法

1640 ワード

webpackは優れた包装プラットフォームです。sass、写真、フォントなどの静的資源を全部jsに包装できます。
最近、著者は伝統的な静的ウェブサイトを改造し、http要求を低減するために、一つの戦略は、単一の静的ウェブページに対応する複数の静的リソース（フォント、css、ピクチャ、js）を一つのjsファイルに包装して出力し、それぞれのhtmlを独立したjsに関連付けることである。
webpackの配置に関する資料をネットで探しましたが、これまでのjsとの対応関係はすべて「一対一」「多対一」でしたが、「多対多」の実現はめったにありません。
でも、いろいろと苦労しましたが、最終的にはやはり私が配置されました。ここでプロファイルに関する文法を分かち合います。


//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出力の位置です。
配置ファイルは四つのマップを行いました。webStatic/pc/js/index.jsはstatic/pc/js/js/index.jsに出力します。/webStatic/pc/js/artile-details.jsはSttic/pc/pc/js/jmatic/jmatic/jmotie/jmomotie/jmomotie/jmotie/jjjjmotie/StStStStartic/jjjmmmmmmmmmmmmmmmmmmbibibibitic/jjjj. jj. jjjjjj. jjj. jjjjjjjjj. jjj/ artic-details.jsはstatic/mobile/js/artic-details.jsに出力します。
後で他のマップを追加します。イベント内でフォーマットに合わせて追加すればいいです。
リボン:
古いウェブサイトをメンテナンスします。短い時間でreactやvueのコンポーネント化で全ページを書き直すのは現実的ではないですが、webpackで包装してもいいです。webpackの多くの入り口を配置して、ウェブサイトを少量変えるだけで、楽しいのはscss、es 6などの文法でウェブサイトを書くことができます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

Vueコンポーネントの作成と送信の方法

Spring Boot JDBCを使って関連データを取得する方法