webpackでpugテンプレートからhtmlファイルを出力するには？

Question

Webpackプロジェクトのpugテンプレートから個々のhtmlファイルを出力しようとしています。私が抱えている問題は、pug-loaderをHTMLファイルに変換することです。

マイwebpack.config：

const path = require('path'); 
const glob = require('glob'); 
const webpack = require('webpack'); 

const src = path.resolve(__dirname, 'src'); 
const dist = path.resolve(__dirname, 'dist'); 

module.exports = { 
    context: src, 

    entry: { 
    pug: glob.sync('./**/*.pug', { 
     cwd: src 
    }), 
    index: path.resolve(src, 'index.js') 
    }, 

    output: { 
    path: dist, 
    filename: '[name].js' 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['es2015'].map(dep => 
       require.resolve(`babel-preset-${dep}`) 
      ) // Fix for lerna symlinked deps 
      } 
     } 
     }, 
     { 
     test: /\.pug$/, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { 
       name: '[path][name].html' 
      } 
      }, 
      'extract-loader', 
      'html-loader', 
      'apply-loader', 
      'pug-loader' 
     ] 
     } 
    ] 
    } 
}; 

これは正しく私のプロジェクト内の各パグテンプレート用のファイルを生成しますが、ファイルはHTMLが含まれていません。

var req = require("!!<absolute-path-to-project>/node_modules/pug-loader/index.js!<absolute-path-to-pug-file>/index.pug"); 
module.exports = (req['default'] || req).apply(req, []) 

私のインストールの依存関係のバージョン：むしろ、各ファイルは次のようになります

{ 
    "apply-loader": "^2.0.0", 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.0", 
    "babel-preset-es2015": "^6.24.1", 
    "extract-loader": "^0.1.0", 
    "file-loader": "^0.11.1", 
    "glob": "^7.1.2", 
    "html-loader": "^0.4.5", 
    "pug-loader": "^2.3.0", 
    "webpack": "^3.0.0" 
} 

Answer 1

はパグ-HTML-ローダーの代わりに、パグ・ローダーを使用してみてください。ここで

例：

{ 
    test: /\.pug$/, 
    use: [ 
     "file-loader?name=[path][name].html", 
     "extract-loader", 
     "html-loader", 
     "pug-html-loader" 
    ] 
    }