Webpack για WordPress

Με τη βοήθεια του Webpack κάνω τα compile των JavaScript και των SCSS αρχείων μου για τα WordPress themes.

Μια γενική μορφή του theme structure μου είναι:

assets
├─ js/
│  ├─ app.js     // στην πρώτη γραμμή του app.js γράφω import "../scss/app.scss";
├─ scss/
│  ├─ app.scss
public/
functions.php
webpack.config.common.js
webpack.config.dev.js
webpack.config.prod.js
postcss.config.js

Τρέχουμε το npm install για την εγκατάσταση των παρακάτω dependencies

package.json

{
  "name": "neobabisTheme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "mini-css-extract-plugin": "^2.5.2",
    "node-sass": "^7.0.1",
    "postcss": "^8.4.5",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^12.4.0",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1",
    "webpack-merge": "^5.8.0"
  },
  "browserslist": [
    "defaults"
  ],
  "scripts": {
    "dev": "webpack --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.prod.js"
  },      
  "keywords": [],
  "author": "Neokazis Charalampos",
  "license": "ISC"
}

Το Webpack config το χώρισα σε 3 αρχεία για καλύτερη διαχείριση του development και του production σε περίπτωση που χρειαστεί να προσθέσω plugins κτλ.

webpack.config.common.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    mode: "development",
    context: path.resolve(__dirname, ""),
    entry: {
        app: ["/assets/js/app.js"], // creates also the app.css

        // MORE INDIVITUAL JAVASCRIPTS
        // js_for_contactPage: ["/assets/js/contactPage.js"],

        // MORE INDIVITUAL STYLES
        // scss_for_contactPage: ["/assets/scss/scss_for_contactPage.scss"], // creates an empty js file with same name
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "public"),
    },

    optimization: {
        minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
    },
    plugins: [new MiniCssExtractPlugin({ filename: "[name].bundle.css" })],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"],
            },
        ],
    },
};

webpack.config.dev.gr

const { merge } = require("webpack-merge");
const common = require("./webpack.config.common");

module.exports = merge(common, {
    mode: "development",
    devtool: "source-map",
    watch: true,
});

webpack.config.prod.js

const { merge } = require("webpack-merge");
const common = require("./webpack.config.common");

module.exports = merge(common, {
    mode: "production",
    watch: false,
});

postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {},
    },
};

Στον φάκελο public εξάγωνται τα αποτελέσματα του compile.