css-sprite-loader/test/cases/postcss-plugins/webpack.config.js

A webpack loader to convert png into sprite image

const CSSSpritePlugin = require('../../../index').Plugin;

const postcssPlugins = [
    require('postcss-px-to-viewport')({
        viewportWidth: 750, // (Number) The width of the viewport
        // viewportHeight: 1334, // (Number) The height of the viewport.
        unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw', // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
        mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
    }),
    require('postcss-viewport-units')({}),
];

module.exports = {
    entry: {
        bundle: './index.js',
    },
    output: {
        path: __dirname + '/dest',
        filename: '[name].js',
        publicPath: 'dest/',
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', require.resolve('../../../index'), {
                loader: 'postcss-loader',
                options: { plugins: postcssPlugins },
            }] },
            { test: /\.png$/, use: ['file-loader'] },
        ],
    },
    plugins: [new CSSSpritePlugin({
        plugins: postcssPlugins,
    })],
};