Y
Y
You can just Eugene2019-11-07 15:24:50
JavaScript
You can just Eugene, 2019-11-07 15:24:50

How to force webpack to compile but not create _name.twig (partials) parts?

Good afternoon! Faced with the problem that for partials twig files relative url for images are not inserted (not compiled), can anyone share a solution to the problem?

Project structure
folder/
    dist/
        assets/
            img/
            css/
            js/
        index.html
    src/
        images/
        styles/
        js/
        twig/
            layouts/
            partials/
                _header.twig
                _footer.twig
            index.twig
webpack.config.js

const path = require('path');

module.exports = {
    paths: {
        base: {
            root: path.resolve(__dirname, '..'),
            src : path.resolve(__dirname, '../src'),
            dist: path.resolve(__dirname, '../dist'),
            test: path.resolve(__dirname, '../test')
        },
        styles: {
            src: path.resolve(__dirname, '../src/styles'),
            dist: './assets/css/'
        },
        views: {
            src: path.resolve(__dirname, '../src/twig'),
            dist: './'
        },
        scripts: {
            src: path.resolve(__dirname, '../src/js'),
            dist: './assets/js/'
        },
        images: {
            src: path.resolve(__dirname, '../src/images'),
            dist: './assets/img/'
        },
        fonts: {
            src: path.resolve(__dirname, '../src/fonts'),
            dist: './assets/fonts/'
        }
    },
    babelLoaderConfig: {
        exclude: [
            /(node_modules|bower_components)/
        ]
    },
    entries: {
        'main': '/main.js'
    }
}
webpack.common.js

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

//config files
const settings = require('./webpack.config.js');

const configureEntries = () => {
    let entries = {};

    for (const [key, value] of Object.entries(settings.entries)) {
        entries[key] = settings.paths.scripts.src + value
    }

    return entries;
}

// Configure Twig Entries
const configureTwigEntries = (dir) => {
    let results = [];
    const list = fs.readdirSync(dir);

    list.forEach(file => {
        file = path.join(dir, file);
        const stat = fs.statSync(file);

        if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) {
            results = results.concat(configureTwigEntries(file));
        } else if (stat && !stat.isDirectory() && path.extname(file) === '.twig' && path.basename(file).indexOf('_') !== 0) {
            results.push(file);
        }
    });

    return results;
}

// Configure HtmlWebpackPlugin
const configureHtmlWebpackPlugin = configureTwigEntries(settings.paths.views.src).map(file => {
    return new HtmlWebpackPlugin({
        template: file,
        filename: path.relative(settings.paths.views.src, file).replace('.twig', '.html'),
        hash: false
    })
});

const configureTwigLoader = () => {
    return {
        test: /\.twig$/,
        exclude: /node_modules/,
        use: [
            'raw-loader',
            {
                loader: 'twig-html-loader',
                options: {
                    data: (context) => {
                        const data = settings.paths.views.src + '/data/data.json';
                        context.addDependency(data);
                        return context.fs.readJsonSync(data, { throws: false }) || {};
                    }
                }
            },
            {
                loader: 'extract-loader',
                options: {
                    publicPath: './'
                }
            },
            'html-loader'
        ]
    }
}

 /* .... */

const baseConfig = {
    context: settings.paths.base.src,
    devtool: 'eval-srouce-map',
    entry: configureEntries(),
    output: {
        path: settings.paths.base.dist,
        filename: `${settings.paths.scripts.dist}[name].[hash:8].js`
    },
    resolve: {
        extensions: ["*", ".js", ".twig", ".scss"]
    },
    module: {
        rules: [
            configureBabelLoader(),
            configureFontLoader(),
            configureTwigLoader()
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ].concat(configureHtmlWebpackPlugin)
}

The task is this, if I prescribe a picture in the index.twig file itself, then everything works fine, but if in ./partials/_header.twig which is then included in the index file, then the link to the picture is not inserted (compiled).
Example:
index.twig

<!-- До -->
<img src="../images/temp/user_ava.png" height="120" width="120" alt="">
<!-- После (в самом index.html) -->
<img src="./assets/img/temp/user_ava.png" height="120" width="120" alt="">

_header.twig

<!-- До -->
<img src="../../images/temp/user_ava.png" height="120" width="120" alt="">
<!-- После (в самом index.html) -->
<img src="../../images/temp/user_ava.png" height="120" width="120" alt="">


And no error in the console (only in the browser that it cannot find a certain picture)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question