Webpack 2 pug - не работает require

Question

В общем, есть webpack.config.js

const webpack = require("webpack");
const path = require("path");
const fs = require("fs");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const PATHS = {
    source: path.join(__dirname, '/src'),
    dist: path.join(__dirname, '/dist'),
    assets: 'assets/'
};

const PAGES_DIR = `${PATHS.source}/public/pages/`;
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'));

module.exports = () => {
    return {
        entry: PATHS.source + "/app/index.js",
        output: {
            path: PATHS.dist,
            filename: "[name].js"
        },
        plugins: [
            ...PAGES.map(page => new HtmlWebpackPlugin ({
                template: `${PAGES_DIR}/${page}`,
                filename: `./${page.replace(/\.pug/,'.html')}`
            }))
        ],
        module: {
            rules: [
                {
                    test: /\.pug$/,
                    loaders: [
                        {
                            loader: "html-loader"
                        },
                        {
                            loader: "pug-html-loader",
                            options: {
                                "pretty":true
                            }
                        }
                    ]
                },
                {
                    test: /\.(jpg|png|svg)$/,
                    loader: 'file-loader',
                    options:{
                        name: '[name].[hash].[ext]',
                        outputPath :  PATHS.assets,
                    }
                }
            ]
        },
        devServer: {
            contentBase: PATHS.source + "/public",
            port: 7800
        }
    }
};

Пытаюсь в pug файле использовать require:

img(src=require("../images/cat.jpg"))

На что webpack выдаёт ошибку:

 ERROR in ./src/public/pages/index.pug (./node_modules/html-webpack-plugin/lib/loader.js!./src/public/pages/index.pug)
    Module build failed (from ./node_modules/pug-html-loader/lib/index.js):
    TypeError: require is not a function

Так же я пробовал делать вот так:

- let cat = require("../images/cat.jpg")
  img(src=cat)

Но результат не меняется

А если я прописываю путь без require - то на выходе получается вот что:

<img src="[object Module]">

Answer 1

Я смог решить эту проблему таким вот способом, не знаю правильно это или нет - но работает)

В webpack.config.js я изменил загрузчик для pug:

{
  test: /\.pug$/,
  loaders: [
    {
      loader: "pug-loader"
    }
  ]
},

И в pug файле, вот так обратился к картинке:

- let cat = require("../images/cat.jpg")
img(src=cat.default)

Если есть способ по лучше, пожалуйста напишите его - буду очень благодарен!

Answer 2

только что нашел Вашу проблему для pug-html-loader на репозитории пакета

update с решением проблемы с pug-loader

вставьте этот новый конфиг pug для вебпака:

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
        options: {
            name: '[name].[hash].[ext]',
            esModule: false,
         },
    }
}

ошибка была в том, что по умолчанию webpack использовал новую es систему модулей. с добавлением опции esModule: false в url-loader теперь не нужно каждый раз дописывать default к require. всё работает отлично.

еще одна причина в том, что Вы по ошибке неправильно указали путь к картинке, исходя из Вашей файловой структуре проекта (забыли папку public добавить). правильный путь будет такой:

img(src=require("../../public/images/cat.jpg"))

на всякий случай дублировал решение проблемы в Ваш репозиторий. вот ссылка на неё

БЛОГ НА HUSL

Webpack 2 pug - не работает require

Ответы (2 шт):