Gemvale

    Webpack

    Ammolite can be used with Webpack as a plugin.

    Installation

    Install this package as a dev dependency in the project:

    npm
    yarn
    pnpm
    bun
    npm i -D @ammolite/unplugin

    Configuration

    Add the following webpack configuration:

    webpack.config.js
    const { AmmolitePlugin } = require("@ammolite/unplugin/webpack");

module.exports = {
    plugins: [
        new AmmolitePlugin(),
    ],
};

    For linking stylesheet into HTML, use html-webpack-plugin:

    npm
    yarn
    pnpm
    bun
    npm i -D html-webpack-plugin
    webpack.config.js
    const { AmmolitePlugin } = require("@ammolite/unplugin/webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new AmmolitePlugin(),
        new HtmlWebpackPlugin(),
    ],
};

    PostCSS Configuration

    Ammolite also supports PostCSS with the @ammolite/postcss package.

    Install these packages as dev dependencies in the project:

    npm
    yarn
    pnpm
    bun
    npm i -D @ammolite/postcss css-loader postcss postcss-loader

    Add the following webpack configuration:

    webpack.config.js
    const { AmmolitePlugin } = require("@ammolite/unplugin/webpack");

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "css-loader",
                    "postcss-loader",
                ],
            },
        ],
    },
    plugins: [
        new AmmolitePlugin({
            emit: false,
        }),
    ],
};

    For integration with html-webpack-plugin:

    npm
    yarn
    pnpm
    bun
    npm i -D mini-css-extract-plugin
    webpack.config.js
    const { AmmolitePlugin } = require("@ammolite/unplugin/webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                ],
            },
        ],
    },
    plugins: [
        new AmmolitePlugin({
            emit: false,
        }),
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin(),
    ],
};

    Add the following PostCSS configuration:

    postcss.config.js
    const ammolite = require("@ammolite/postcss");

module.exports = {
    plugins: [
        ammolite(),
    ],
};

    In case there are no any CSS file, create one and import it:

    ./src/index.js
    import "index.css"

// ...