Webpack を使用して複数ページのアプリケーションを構築する手順の分析

今回は、webpack を使用して複数ページのアプリケーションを構築する手順の分析をお届けします。webpack を使用して複数ページのアプリケーションを構築するための 注意事項 は何ですか?実際のケースを見てみましょう。

webpack の構成と使用法に関する記事はすでにインターネット上にたくさんありますが、そのほとんどは単一ページのアプリケーションに関するもので、複数の HTML をパッケージ化する必要がある場合は面倒になります。 webpack-dev-server でルーティングを使用するにはどうすればよいですか?複数のHTMLとJSをパッケージ化する方法 チャンクして md5 を自動的に更新しますか?この記事では、これらの問題を解決する方法について説明します。

ここでは、Webpack についての最も基本的な理解がすでにあることを前提としています

需要

私たちのニーズを見てみましょう:

1. 開発時にサーバーとして webpack-dev-server を使用します

webpack-dev-server でルーティングを使用します。/a にアクセスすると a.html が表示され、/b に b.html が表示されます。引用されたリソースに md5 スタンプを追加するための複数の HTML
3. メイン

   ディレクトリ構造

├── src            
│  └── views         # 每一个文件夹对应一个页面
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # 打包输出的目录
|  └── ...
└── template.html       # 将根据这个模版，生成各个页面的html
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express

ここでは、template.html に基づいて複数のページの HTML を生成します。参照されるリソース パスのみが異なります。もちろん、ページごとに個別の HTML テンプレートを使用することもできます。

Webpack設定

ここで解決すべき主な問題が 2 つあります。

1. 複数のページの js ファイルをパッケージ化する

src/views の下のディレクトリを読み取り、各ディレクトリがページとして扱われ、js チャンクにパッケージ化されることに同意します。

2. 複数の HTML をパッケージ化する

ループ内で複数の HtmlWebpackPlugin プラグインを生成し、各プラグインのチャンクが上記でパッケージ化された js チャンクを指すようにします。

りー ルーティング設定

マルチページ アプリケーションでは、localhost:8080/a.html ではなく localhost:8080/a にアクセスしたいとします。

webpack-dev-server はファイルをメモリ内にパッケージ化するだけなので、ファイルが実際にはまだ存在しないため、express で直接 sendfile('output/views/a.html') することはできません。幸いなことに、webpack はメモリ内のファイルを出力するための outputFileStream を提供しており、これをルーティングに使用できます。

ルート

を自分で定義するには、express や koa などのライブラリをインポートし、webpack-dev-server を

ミドルウェア

として処理する必要がある場合があることに注意してください。

りー

最後に、package.json で起動コマンドを定義します:

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* 一些webpack基础配置 */  
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // 取倒数第二层(view下面的文件夹)做包名
     var split = filepath.split('/');
     var name = split[split.length - 2];
     entries[name] = './' + filepath;
   });
   return entries;
}   
var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
  // 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
  webpackConfig.entry[name] = entries[name];
  
  // 每个页面生成一个html
  var plugin = new HtmlWebpackPlugin({
    // 生成出来的html文件名
    filename: name + '.html',
    // 每个html的模版，这里多个页面使用同一个模版
    template: './template.html',
    // 自动将引用插入html
    inject: true,
    // 每个html引用的js模块，也可以在这里加上vendor等公用模块
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
})

Run ブラウザで localhost:8080/各ページにアクセスすると、目的の結果が表示されるはずです。 この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

ajax は状態を直接変更し、非リフレッシュ状態を削除します npm run dev

vue axios を使用する場合、これはどこを指しますか?

以上がWebpack を使用して複数ページのアプリケーションを構築する手順の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。