WebPack v PhpStorm

V první řadě musí být nainstalováno NODE.js.

brew install node

Vytvořte soubor package.json. V něm jsou uvedeny požadované závislosti, např.:

{
  "name": "project.cz",
  "version": "1.0.0.",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^6.5.1",
    "mini-css-extract-plugin": "^2.4.5",
    "ts-loader": "^9.2.6",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "dependencies": {
    "uglify-js": "^3.14.5"
  }
}

Pokud WebPack není nainstalovaný provedeme příkaz:

npm install --save-dev webpack

Vytvoříme konfigurační soubor webpack.config.js, jehož obsahem může být např.:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    //mode: 'development',
    mode: 'production',
    entry: [
        './templates/tpl-default/js/apps.js',
        './assets/vendor/jquery/jquery-migrate-1.4.1.min.js',
        './assets/js/form.js',
        './assets/js/script-ajax-uni.js',
        './templates/tpl-default/js/jquery.pwstabs.min.js',
        './assets/vendor/fancybox/jquery.fancybox.min.js',
        './assets/vendor/flickity/flickity.pkgd.min.js',

        './templates/tpl-default/css/jquery.pwstabs.min.css',
        './templates/tpl-default/css/icomoon.css',
        './assets/vendor/fancybox/jquery.fancybox.min.css',
        './assets/vendor/flickity/flickity.css'
        ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './templates/tpl-default/js/'),
    },
    resolve: {
        alias: {
            jquery: path.resolve(__dirname, './assets/vendor/jquery/jquery-3.2.1.min.js'),
        },
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new MiniCssExtractPlugin({
            filename: "bundle.css"
        }),
    ],
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader",
                ]
            }
        ]
    }
};

Spuštění kompilace provedeme pomocí příkazu:

npm run build