Webpack での多対多構成の実装 (コードが添付されています)-htmlチュートリアル-php.cn

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

不言

リリース： 2018-08-17 10:12:10

オリジナル

1878 人が閲覧しました

この記事の内容は、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, &#39;&#39;),        
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        filename: &#39;[name].js&#39;
    }

ログイン後にコピー

設定手順

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 に出力されます

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

概要:

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