Как правильно настроить проект webpack?

Question

[Максим Власов]

Здравствуйте! Объясните, пожалуйста, как настроить проект, что бы он мог использовать less,pug, обрабатывать картинки, обрабатывать шрифты. 2й день мучаюсь.

Мой конфиг на текущий момент:

const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

let pluginsOptions = [];
let pages = glob.sync(__dirname + '/src/pug/pages/*.pug');
pages.forEach(function (file) {
    let base = path.basename(file, '.pug');
    pluginsOptions.push(
        new HtmlWebpackPlugin({
            filename: './' + base + '.html',
            template: './src/pug/pages/' + base + '.pug',
            inject: true,
        })
    )
});
pluginsOptions.push(new ExtractTextPlugin('/css/style.css'));


module.exports = {
    entry: './src/index.js',
    devServer: {
        contentBase: './dist',
    },
    output: {
        filename: './js/bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.less/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.pug$/,
                use: [
                    {
                        loader: 'pug-loader',
                        options: {
                            pretty: true
                        }
                    }
                ],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    outputPath: './dist/images',
                    publicPath: 'assets',
                },
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    outputPath: './dist/fonts',
                    publicPath: 'assets',
                },
            },

        ]
    },
    plugins: pluginsOptions
};

Comments

[Михаил]

И что не работает

[Максим Власов]

Михаил, img, например

[Михаил]

Максим Власов, и какая ошибка?

[Максим Власов]

Михаил, никакой. Оно просто не сохраняет картинки

[Михаил]

Максим Власов, а как вы их пытаетесь сохранить

[Максим Власов]

Михаил, все, что я пытался, написано в конфиге. Если бы я знал как это г... чудо инженерной мысли работает, то не спрашивал бы совета. Ибо в доках ровным счетом ничего. Раньше работал с gulp. Там попроще кажется все это дело.

[Михаил]

Максим Власов, вы чё думаете, от того, что вы написали конфиг всё вжух и само напишется?

[Максим Власов]

Михаил, именно по этому и прошу объяснить, что нужно написать

[Михаил]

Максим Власов, ну так подключите картинки в код

[Максим Власов]

Михаил, Вы сейчас серьезно? Не обрабатывается img(srs="/path/to/image.jpg"). Каждую картинку подключать в js - это извращение какое-то.

[Михаил]

Максим Власов,

{
  test: /\.pug$/,
  use: ['html-loader', 'pug-html-loader'],
},

[Михаил]

Максим Власов, ну или вот, в доке к лоадеру https://www.npmjs.com/package/pug-loader#embedded-... на что вы потратили 2 дня не понятно

[Максим Власов]

Михаил, на доку из оф документации https://github.com/pugjs/pug-loader тут сказано, что нужен apply-loader, который вообще непонятно как работает с пагом. То ли устарел, то ли еще что

[Михаил]

Максим Власов, да сам pug устарел вместе с его лоадерами

[Максим Власов]

Михаил, может что-то посоветуете?

[Михаил]

Максим Власов, html

[Максим Власов]

Михаил, имелось в виду шаблонизатор. Какой-то аналог. А не ванильку.

[Михаил]

Максим Власов, а зачем он вам

[Максим Власов]

Михаил, есть куча повторяющихся элементов. И каждый раз копипастить не комильфо.

[Михаил]

Максим Власов, ну вебпак обычно используют для SPA, а там все на компонентах
Ну и тут же вопрос куда дальше пойдет ваша верстка, если в php и ему подобные, то лучше сразу его и использовать
Пагом тут можно оправдать если после компиляции код не будет трогаться а данные с API

[Максим Власов]

Михаил, это будет просто верстка нескольких страниц. Не будет динамики. Все данные из JSON.

[Михаил]

Максим Власов, html после компиляции не будет трогаться? В для кого-то делаете, если да, то уверены что человек сможет поменять что-то в паге и скомпилить

[Максим Власов]

Михаил, HTML 100% не будет редактироваться вообще никогда.

[Михаил]

Максим Власов, тогда норм

Answer 1

[Максим Власов]

Приведу сам же рабочий конфиг. Вот хоть бы где-то было сказано, что именно так надо делать, что бы оно работало нормально. Вся инфа собриралась по кусочку.

const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

let pluginsOptions = [];
let pages = glob.sync(__dirname + '/src/pug/pages/*.pug');
pages.forEach(function (file) {
    let base = path.basename(file, '.pug');
    pluginsOptions.push(
        new HtmlWebpackPlugin({
            filename: './' + base + '.html',
            template: './src/pug/pages/' + base + '.pug',
            inject: true,
        })
    )
});
pluginsOptions.push(new ExtractTextPlugin('/css/style.css'));


module.exports = {
    entry: './src/index.js',
    devServer: {
        contentBase: './dist',
    },
    output: {
        filename: './js/bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.less/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.pug$/,
                use: [
                    {
                        loader: 'pug-loader',
                        options: {
                            pretty: true
                        }
                    }
                ],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    outputPath: './images',
                    name: '[name].[ext]',
                    esModule: false,
                    publicPath: '/images',
                },
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    outputPath: './fonts',
                    esModule: false,
                    publicPath: '/fonts',
                },
            },

        ]
    },
    plugins: pluginsOptions
};