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

2019年10月14日

「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',
    }),
  ]
}

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

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