negibouze / html-webpack-pug-plugin

Pug/Jade extension for the HTML Webpack Plugin
MIT License
29 stars 7 forks source link

It doesn't convert output to pug at all? #18

Open techsin opened 6 years ago

techsin commented 6 years ago
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'
    })
}
negibouze commented 6 years ago

@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.

techsin commented 6 years ago

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

negibouze commented 5 years ago

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