README.md

Webpack Drupal Theming

Install

Install the following node modules (npm), in the same directory as this readme file, for compiling and linting our code.

npm i -D @babel/core @babel/preset-env autoprefixer babel-loader browser-sync browser-sync-webpack-plugin css-loader mini-css-extract-plugin postcss-loader postcss-pxtorem sass sass-loader standard stylelint stylelint-config-sass-guidelines stylelint-order webpack webpack-cli

demo_webpack.info.yml

libraries:
  - demo_webpack/base
  - demo_webpack/messages
  - demo_webpack/main

demo_webpack.libraries.yml

main:
  version: VERSION
  css:
    theme:
      dist/main.css: {}
  js:
    dist/main.min.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/once

dev:
  version: VERSION
  css:
    theme:
      distdev/main.css: {}
  js:
    distdev/main.min.js: {}
  dependencies:
  - core/drupal
  - core/jquery
  - core/once

demo_webpack.theme

<?php

/**
 * @file
 * Functions to support theming.
 */

/**
 * Implements hook_page_attachments_alter().
 */
function demo_webpack_page_attachments_alter(array &$attachments) {
  // Use the dev env if developing locally.
  if (in_array('demo_webpack/main', $attachments['#attached']['library']) && file_exists(__DIR__ . '/distdev')) {
    $index = array_search('demo_webpack/main', $attachments['#attached']['library']);
    $attachments['#attached']['library'][$index] = 'demo_webpack/dev';
  }
}

package.json

{
  "name": "demo-webpack",
  "version": "1.0.0",
  "description": "",
  "license": "ISC"
  "scripts": {
    "dev": "webpack --env development --config webpack.config.js --watch",
    "build": "webpack --env production --config webpack.config.js"
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16,
      propList: ['*'],
      mediaQuery: true,
      selectorBlackList: [/^html$/, /^body$/]
    }),
    require('autoprefixer')()
  ]
}

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const BrowserSyncPlugin = require("browser-sync-webpack-plugin")
const webpack = require('webpack') //to access built-in plugins
const path = require("path")

module.exports = (env) => {
  const isProduction = env && env.production

  return {
    mode: isProduction ? "production" : "development",
    devtool: isProduction ? false : "source-map",
    entry: {
      main: ["./src/js/main.js", "./src/sass/main.scss"]
    },
    output: {
      path: isProduction ? path.resolve(__dirname, "dist") : path.resolve(__dirname, "distdev"),
      filename: "[name].min.js",
      assetModuleFilename: 'images/[name][ext][query]',
      publicPath: "./",
      clean: isProduction ? true : false
    },
    stats: 'errors-only',
    module: {
      rules: [
        {
          test: /\.(jpg|png|svg)$/,
          type: "asset/resource",
        },
        {
          test: /\.s[ac]ss$/i,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                modules: false,
              }
            },
            {
              loader: "postcss-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                implementation: require("sass"),
                sassOptions: {
                  outputStyle: "expanded",
                }
              }
            }
          ]
        },
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [["@babel/preset-env", { modules: false }]]
            }
          }
        }
      ]
    },
    plugins: [
      new webpack.ProgressPlugin(),
      new MiniCssExtractPlugin(),
      new BrowserSyncPlugin({
        host: "localhost",
        port: 3000,
        proxy: "http://local.drupal10.test",
        open: false,
        ghostMode: false,
        ui: false,
        reloadOnRestart: true,
        files: [
          './distdev/main.css',
          './distdev/main.min.js'
        ]
      },
      {
        injectCss: true
      })
    ]
  }
}