Webpackで複数のページを作成するには？

Question

これはアマチュアの質問のように見えるかもしれませんが、私は私のwebpack.config.jsが

var HtmlWebpackPlugin = require('html-webpack-plugin') 
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 
var webpack = require('webpack') 
var path = require('path') 

var isProd = process.env.NODE_ENV === 'production' // true or false 
var cssDev = ['style-loader', 'css-loader', 'sass-loader'] 
var cssProd = ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    loader: ['css-loader', 'sass-loader'], 
    publicPath: '/dist' 
}) 
var cssConfig = isProd ? cssProd : cssDev 

module.exports = { 
    entry: { 
    app: './src/app.js' 
    }, 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     use: 'eslint-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.scss$/, 
     use: cssConfig 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: 'babel-loader' 
     }, 
     { 
     test: /\.pug$/, 
     use: 'pug-loader' 
     } 
    ] 
    }, 
    devServer: { 
    contentBase: path.join(__dirname, 'dist'), 
    compress: true, 
    hot: true, 
    open: true 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     title: 'Project Demo', 
     hash: true, 
     alwaysWriteToDisk: true, 
     template: './src/index.pug' 
    }), 
    new HtmlWebpackHarddiskPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'app.css', 
     disable: !isProd, 
     allChunks: true 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin() 
    ] 
} 

は基本的に、私の設定ファイルが現在HtmlWebpackPluginにを使用しているファイルであるWebPACKの

ここ

で他のページを作成するトラブルを抱えています私のindex.pugsrcフォルダからindex.htmlをdistフォルダに出力します。

ただし、別のページを作成する場合はどうすればよいですか。たとえば、約ページ。

私がsrcフォルダにabout.pugを作成した場合、設定ファイルに含めたため、Webpackで処理されません。しかし、私はこれを達成する方法がわかりません。

どのように私は入力など、私のsrcフォルダ内のabout.puggallery.pugcontact.pugとして異なるパグファイルは、その後、私はあなたがHtmlWebpackPluginの複数のインスタンスを作成することができると信じてabout.htmlgallery.htmlcontact.html

Answer 1

として私distフォルダ内のすべてのこれらの出力を持つことができます：

plugins: [ 
    new HtmlWebpackPlugin({ 
     title: 'Project Demo', 
     hash: true, 
     alwaysWriteToDisk: true, 
     template: './src/index.pug' 
    }), 
    new HtmlWebpackPlugin({ 
     title: 'Page2', 
     hash: true, 
     alwaysWriteToDisk: true, 
     template: './src/page2.pug' 
    }), 
... 

Answer 2

@ Derekでは、HtmlWebpackPluginインスタンスのリストをプログラムで生成することができます。

const path = require('path') 
const fs = require('fs') 

// Store .html file names in src/ in an array 
const pages = 
    fs 
    .readdirSync(path.resolve(__dirname, 'src')) 
    .filter(fileName => fileName.endsWith('.html')) 

module.exports = { 
    // Use .map() on the array of file names to map each file name 
    // to the plugin instance, then spread the mapped array into 
    // the plugins array. 
    plugins: [ 
    ...pages.map(page => new HtmlWebpackPlugin({ 
     template: page, 
     filename: page 
    })) 
    ] 
}