【失敗】【Webpack4・Pug】ただPugをHtmlにしたいだけなのになぜこんなに辛いんだ。

技術力のなさを自ら露呈していくスタイル。

今回のお題は

PugでHTMLを変換するだけのWebpack4を作りたかった

これです。それ以外の一切は行いません。

環境

{
  "name": "app_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "devb": "webpack --mode=development",
    "prob": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {}
}

期待する動作

• index.pugがmain.htmlにトランスパイルされる。
• jsは生成されない 重要
• main.htmlの中でwebpackが生成したjsをリンクしない 重要

実装

下記のコードはjsが生成されてしまいます・・・。

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require("path")

module.exports = {

    entry : './src/index.pug',

    output:{
        //プロジェクトのroot階層に「このフォルダは不要」フォルダが必要です（泣
        path: path.resolve(__dirname,'./このフォルダは不要'),
    },

    module: {
        rules: [
                {
                test: /\.pug$/,
                exclude: /node_modules/,
                loader: ['html-loader', 'pug-plain-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.pug',
            filename: "../main.html"
        })
    ]
}

追記(2018/12/20)

結局Gulpで解決しました。Gulpの方が気持ちシンプルに見えるのでいいかもですね。