プログラミングの役立つ記事をお届けします

Framework7(webpack)で複数ファイルをビルドする方法

「Framework7(webpack)でアプリ作り始めたけど、index.html以外のアプリhtmlも同時にビルドしたいけどどうすればいい?」

こんにちは、タカフです。

Framework7やwebpack等のフロントエンドのビルドシステムを使っていると複数htmlファイルをビルドしたい事、ありますよね。

最適な方法がありますので、備忘録としても記事にしておきたいと思います。

結論:webpack.config.jsで複数htmlファイルをビルド出来るようにする

結論としてはwebpack.config.jsの記述方法で複数htmlファイルをビルド出来るようにします。

下記コードはFramework7で生成されるwebpack.config.jsの大事な部分を抜粋しての説明となります。

今回の例はアプリ用のindex.htmlの他に管理画面用アプリのadmin.htmlを作ろうとするようなケースです。

module.exports = {
  entry: {
    app: './src/js/app.js',
    admin: './src/admin.js',
  },
  output: {
    path: resolvePath('www'),
    filename: './js/[name].js',
    publicPath: '',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './src/index.html',
      inject: true,
      chunks: ['app'],
      minify: env === 'production' ? {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: false,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      } : false,
    }),
    new HtmlWebpackPlugin({
      filename: './admin.html',
      template: './src/admin.html',
      inject: true,
      chunks: ['admin'],
      minify: env === 'production' ? {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: false,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      } : false,
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
  ]
}

大事なポイントとしては、

  1. entryにてビルドしたいjsの数だけ連想配列でキーとソースとなるjsファイルパスを列挙する
  2. outputにてfilename[name].jsと記述すると1.で定義したキーでjsファイルが出力される
  3. MiniCssExtractPluginにてfilename[name].cssと記述すると1.で定義したキーでcssファイルが出力される
  4. HtmlWebpackPlugin のオプションで chunks1.で定義したキーを記述しておくとその2.3.出力したjs/cssファイルがinjectにより挿入される

となります。

おまけ:管理画面(admin.html)の開発を始めたい時

Framework7では npm run dev コマンドでindex.htmlページが開かれて開発を始めることが出来ますが、
今回のように別のhtmlファイルを定義してその開発を始めたい時はコマンドに以下のようなオプションを付けることで開始出来ます。

$ npm run dev -- --open-page admin.html

これは npm run コマンドに引数を渡す方法を使って、最初に開くページ(–open-page)を指定しています。

現場からは以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です