webpack.config.js 4.32 KB
Newer Older
1
const path = require('path');
2 3 4 5
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
6 7 8 9 10 11
const SpritesmithPlugin = require('webpack-spritesmith');

const templateFunction = function (data) {
    var iconName = path.basename(data.sprites[0].image, path.extname(data.sprites[0].image))
        .replace('~', '');

12
    var shared = '.D { display: inline-block; background-image: url(I); }'
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
        .replace('D', iconName)
        .replace('I', data.sprites[0].image);

    var perSprite = data.sprites.map(function (sprite) {
        var spriteName = sprite.name
            .replace(/(?!\w|\s)./g, '')
            .replace(/\s+/g, '-')
            .replace(/^(\s*)([\W\w]*)(\b\s*$)/g, '$2');

        return '.D-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
            .replace('D', iconName)
            .replace('N', spriteName)
            .replace('W', sprite.width)
            .replace('H', sprite.height)
            .replace('X', sprite.offset_x)
            .replace('Y', sprite.offset_y);
    }).join('\n');

    return shared + '\n' + perSprite;
};

const makeSprite = function (dir) {
    return new SpritesmithPlugin({
        src: {
            cwd: path.resolve(__dirname, 'src/ico/sickrage', dir),
            glob: '*.png'
        },
        target: {
            image: path.resolve(__dirname, 'src/spritesmith-generated/sickrage-' + dir + '.png'),
            css: [
                [path.resolve(__dirname, 'src/spritesmith-generated/sickrage-' + dir + '.css'), {
                    format: 'function_based_template'
                }]
            ]
        },
        apiOptions: {
            cssImageRef: '~sickrage-' + dir + '.png'
        },
        customTemplates: {
            'function_based_template': templateFunction
        }
    });
};
56 57

module.exports = {
58
    entry: './src/app.js',
59 60 61 62 63 64
    output: {
        path: path.resolve(__dirname, 'sickrage/core/webserver/static/js'),
        filename: 'core.min.js'
    },
    module: {
        rules: [
65
            {
66 67 68 69 70 71 72 73
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                test: /\.scss$/,
74 75 76 77 78 79
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },
80 81
            {
                test: /\.js$/,
82 83 84 85
                exclude: [
                    /node_modules/,
                    /bower_components/
                ],
86 87 88 89 90 91
                loader: "eslint-loader"
            },
            {
                test: /\.js$/,
                exclude: [
                    /node_modules/,
92
                    /bower_components/
93 94 95 96
                ],
                loader: "babel-loader",
                options: {
                    presets: ['env']
97 98 99
                }
            },
            {
100
                test: /\.(woff|woff2|eot|ttf|svg)$/,
101 102 103 104 105 106 107 108 109
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '../fonts/'
                    }
                }]
            },
            {
110 111 112 113 114 115
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader",
                query: {
                    name: '[name].[ext]',
                    outputPath: '../images/'
                }
116 117
            }
        ]
118
    },
119 120 121
    resolve: {
        modules: ["node_modules", "spritesmith-generated"]
    },
122 123 124 125 126 127
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
128 129 130 131
        new CleanWebpackPlugin([
            'sickrage/core/webserver/static/css/*.*',
            'sickrage/core/webserver/static/js/*.*'
        ]),
132 133 134 135
        new MiniCssExtractPlugin({
            filename: "../css/core.min.css",
            chunkFilename: "[id].css"
        }),
136 137 138 139 140
        new OptimizeCSSAssetsPlugin(),
        makeSprite('core'),
        makeSprite('network'),
        makeSprite('notifiers'),
        makeSprite('providers'),
141 142
        makeSprite('subtitles'),
        makeSprite('flags')
143
    ]
144
};