html-webpack-pug-plugin icon indicating copy to clipboard operation
html-webpack-pug-plugin copied to clipboard

It doesn't convert output to pug at all?

Open techsin opened this issue 6 years ago • 3 comments

const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const PRODUCTION = process.env.NODE_ENV === "production";
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const hotware = PRODUCTION ? [] : ["webpack/hot/dev-server", "webpack-hot-middleware/client"];
const entry = {};
let plugins = PRODUCTION
    ? [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        })
    ]
    : [new webpack.HotModuleReplacementPlugin()];

glob.sync("./frontend/scripts/*.js").forEach(function (fpath) {
    let filename = path.basename(fpath, path.extname(fpath));
    entry[filename] = [...hotware, fpath]
    plugins.push(createPugFile(filename))
});

plugins.push(new HtmlWebpackPugPlugin());

let pathsToClean = [
    'public/js/*.*',
];

plugins.push(new CleanWebpackPlugin(pathsToClean));

module.exports = {
    mode: PRODUCTION ? "production" : "development",
    entry: entry,
    output: {
        path: path.join(__dirname, "./public/js/"),
        publicPath: "/js/",
        filename: "[name].[hash].js",
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            use: ["babel-loader"],
            exclude: /node_modules/,
        },
        {
            test: /\.pug$/,
            use: 'pug-loader'
        }]

    },
    optimization: {
        minimizer: PRODUCTION ? [
            new UglifyJsPlugin({
                parallel: true
            })
        ] : []
    },
    plugins: plugins,
    devtool: "source-map"
};

function createPugFile(filename) {
    return new HtmlWebpackPlugin({
        inject: false,
        chunks: [filename],
        filename: `./../../views/scripts/${filename}.pug`, //uses different path then template.
        template: './views/scripts/webpacktemplate.pug'
    })
}

techsin avatar Nov 10 '18 18:11 techsin

@techsin Thanks for your question. This plugin is extension for the HTML Webpack Plugin. It is intended to convert HTML Webpack Plugin output to pug, it does not operate independently.

negibouze avatar Nov 13 '18 00:11 negibouze

I'm using const HtmlWebpackPlugin = require('html-webpack-plugin');

techsin avatar Nov 13 '18 02:11 techsin

@techsin Sorry for my late reply. I reconfirmed your first comment. you using "pug-loader". If possible, please try without using "pug-loader".

negibouze avatar Nov 19 '18 01:11 negibouze