Webpackでマルチページ開発を実装する方法

この記事では主に webpack のマルチページ開発の実践方法を紹介します。編集者がそれを参考にさせていただきます。エディターをフォローして見てみましょう

前に書いてあります

Webpackは、js、css、ページ、写真、ビデオなどのさまざまなリソースをモジュール化できるモジュールローダーおよびパッケージ化ツールです。現在、単一ページの Webpack モデルがインターネット上で多数出回っていますが、複数ページの場合はどうなるのでしょうか?それほどではありませんが、現在は複数ページのフロントエンド モデルを提供しています。皆さんにも使っていただければ幸いです。

初めて webpack に触れたとき、webpack は webpack+react、webpack+vue などの単一ページのアプリケーションにのみ適していると思いました。私自身、webpack+vue を使ってプロジェクトを構築したり開発したりする中で、webpack の威力と利便性を実感しています。実際のプロジェクトのニーズに基づいて、webapck を使用して複数ページのサイトを構築できるかどうか疑問に思っています。そこで私は調査を開始し、最終的に比較的完全なソリューションを構築しました。

この記事では、実際のプロジェクトを例として、複数ページのプロジェクトでエンジニアリング構築に webpack を使用する方法を説明します。この記事は私自身の実際の経験を要約したものであるため、いくつかの解決策は最適ではなく、現在も検討および最適化されています。間違いや漏れがある場合は、ご指摘ください。

はじめに

このプロジェクトは主に webpack2.x に基づいて構築されており、補助ツールとして gulp が使用されています。フロントエンドはテンプレート エンジンとして art-template を使用します。1 つのページがテンプレート ファイルに対応し、インポートまたは Webpack によってこれらのモジュールが 1 つのファイルに自動的にマージされます。エントリーファイル。

フロントエンド開発環境のセットアップ

メインディレクトリ構造

├─dist          #打包后生成的文件目录
└─src           #开发目录
  ├─components     #通用组件
  ├─static       #静态资源目录
  │ ├─css
  │ ├─img
  │ └─js
  │   ├─component  #站点通用组件对应的js
  │   ├─lib     #第三方js库
  │   ├─services   #各页面入口
  │   └─util     #通用工具js
  ├─template      #html模板
  └─views        #页面
   main.js       #公共入口
gulpfile.js        #gulp任务配置
package.json       #项目依赖
webpack.config.js     #webpack配置

Webpack構成

エントリーファイル

// 获取入口文件
var entries = (function() {
  var jsDir = path.resolve(__dirname, 'src/static/js/services');
  var entryFiles = glob.sync(jsDir + '/*.js');
  var map = {};

  entryFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    map[filename] = filePath;
  });
  return map;
})();

このメソッドは、ファイル名からファイルの絶対パスへのマップを生成します(例:

)

entry: {
  'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

ホットアップデート

ホットアップデートは単純に使いにくいだけで、開発効率が大幅に向上します。

//服务器配置
var devServer = env === 'production' ? {} : {
  contentBase: path.resolve(__dirname),
  compress: true,
  historyApiFallback: true,
  hot: true,
  inline: true,
  host: 'localhost', 
  port: 8080
};

さらに、新しい webpack.HotModuleReplacementPlugin() をプラグインに追加し、ホット モジュール交換を有効にしてホット アップデートを実現します。

HTML構成の生成

同じページ上のjsファイルがテンプレートファイルと同じ名前を持つことが合意され、最終的にはjsに基づいて同じ名前のhtmlファイルが生成されます。

var htmlPages = (function() {
  var artDir = path.resolve(__dirname, 'src/views');
  var artFiles = glob.sync(artDir + '/*.art');
  var array = [];
  artFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    array.push(new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/template/index.html'),
      filename: filename + '.html',
      chunks: ['vendor', 'main', filename],
      chunksSortMode: function(chunk1, chunk2) {
        var order = ['vendor', 'main', filename];
        var order1 = order.indexOf(chunk1.names[0]);
        var order2 = order.indexOf(chunk2.names[0]);
        return order1 - order2;
      },
      minify: {
        removeComments: env === 'production' ? true : false,
        collapseWhitespace: env === 'production' ? true : false
      }
    }));
  });
  return array;
})();

共通モジュールをコンポーネントに抽出

複数のページで使用する必要がある一部のモジュールについては、共通コンポーネントとして抽出できます。コンポーネントの構成はページと同じで、.js ファイル、.art ファイル、および .css ファイルであり、HTML コンテンツは js ファイルでレンダリングされ、最終的には使用時に直接エクスポートできます。 。具体的な実践方法については、デモを参照してください

問題があります

1. 新しいページを作成するたびに、webpackサービスを再起動する必要があります

2. Webフォントを圧縮する場合、フォントファイルを圧縮できません。 font-face を通じて導入されましたが、これより良い解決策は現在ありません

demo

この記事の理論に基づいたデモ、アドレス: webpack-multipage-demo

上記は私がコンパイルしたものです。皆さん、今後皆さんのお役に立つことを願っています。

関連記事:

Vueで数値入力ボックスコンポーネントを実装する方法

jqueryを使用して左右のサイドバーのスケーリング効果を実現する方法

JS関数のsetTimeoutの詳細な紹介

mongooseではオブジェクトの更新について詳しく紹介されています

JavaScriptでAOPを実装する方法

以上がWebpackでマルチページ開発を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。