Laravel 5.4 webpack custom iconfont / webfont plugin

687 Views Asked by At

I am just starting out with webpack.js and Laravel 5.4 (upgrading from 5.2)

I have just about everything sorted out but my build and sass requires an iconfont generator from svg.

In gulp and grunt this hasn't been an issue but cannot seem to figure out how to add a custom node and plugin to webpack in laravel 5.4

I am currently trying to use https://github.com/itgalaxy/webpack-webfont

in which there are minimal usage instructions, and I am totally lost as to how I A: call this plugin and B: where do I actually place this code? in the webpack.config.js? or do I call it from the webpack.mix.js?

import WebfontPlugin from '../../Plugin';
import path from 'path';

export default {
    entry: path.resolve(__dirname, '../entry.js'),
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css/,
                loaders: [
                    'style',
                    'css'
                ]
            },
            {
                test: /\.scss$/,
                loaders: [
                  'style',
                  'css',
                  'sass'
                ]
            },
            {
                loader: 'url-loader',
                test: /\.(svg|eot|ttf|woff|woff2)?$/
            },
        ]
    },

    resolve: {
        modulesDirectories: ["web_modules", "node_modules"]
    },
    plugins: [
        new WebfontPlugin({
            files: path.resolve(__dirname, '../svg-icons/**/*.svg'),
            css: true,
            cssFormat: 'scss',
            cssTemplateFontPath: './fonts/',
            dest: {
                fontsDir: path.resolve(__dirname, '../scss/fonts'),
                css: path.resolve(__dirname, '../scss/_webfont.scss'),
            }
        })
    ]
};
0

There are 0 best solutions below