Webpack Stack

Webpack configuration for Drupal 8/9 by ECEDI

Requirements

• Node 14
• Webpack installed globally (development instance)

How to install

npm i @ecedi/webpack-stack webpack webpack-cli

cp ./node_modules/@ecedi/webpack-stack/config.example.js config.js

Tips & Tricks

• Add scripts in your package.json like this:

  "scripts": {
    "build": "webpack --config ./node_modules/@ecedi/webpack-stack/webpack.config.js",
    "watch": "webpack watch --config ./node_modules/@ecedi/webpack-stack/webpack.config.js"
  }

Then run npm run build or npm run watch

• You can add @ecedi/drupal-js-cli for completed your stack es6 in drupal and with this package you can install all your librairies with NPM

Configuration

All configuration with themes twig, sass and js ... is on config.js, You have access to getFiles() for make array of files recursive

Commands line

| commands\tasks | watch for changes | compile the twig | compile the SCSS | minify the JS | compile the es6 drupal | | --------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | | npm run build | | X | X | X | X | | npm run watch | X | X | X | X | X |

• npm run build run default task: twig + sassdev
• npm run watch run default task with watch: twig + sassdev + browser sync

Files

• webpack.config.js: Webpack main file
• package.js: main file where global infos and dependencies are declared
• config.example.js: example of a project config file where path variables are declared
• .nvmrc: indication of the Node version to use

Developers

if you want to dev this package you need to use --config options for run webpack like this:

webpack --config ${path}/webpack.config.js

Drupal module

For use es6 you need to create a file with *.es6.js which will be compiled in `*.js and which will therefore be your library

Drupal theme

Shared

You must create a shared folder in your example theme themes/custom/yourtheme/js/src/shared and you can import the js that will be created from there using an _shared alias

Theme libraries

You just need to put your js files in the theme src example folder themes/custom/yourtheme/js/src which will then be compiled in the /js of your theme