Django 3.1 + Webpack Encore 0.28.0

Webpack Encore od Symfony je fantastická věc, umožňuje snadno používat v projektech SCSS stylování, Vue.js, TypeScript a jiné nejmodernější vymoženosti, které nabízí Webpack. Konfigurace Encore je snadná oproti čistému Webpacku, je to v podstatě „human-readable“ generátor konfiguračního souboru pro Webpack a zároveň automatizace vkládání entrypointů do šablon. Entrypointy jsou generovány do json souboru, ze kterého si Encore tahá aktuální verzi a není třeba se o nic starat.

Integrace Webpack Encore do Python (používám také v PHP projektech bez Symfony framework).

pip install django-encore

+ přidat django-encore do requirements.txt

Jsem zvyklý z PHP vytvářit složku /assets v root projektu a v ní podsložky /styles a /scripts. V Pythonu žádný problém, lze použít totéž.

Další informace k instalace Webpack Encore https://github.com/egorsmkv/django-encore.

Uprava setttings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
    BASE_DIR / "assets_build",
]

ENCORE_ENTRYPOINTS_FILE = BASE_DIR / 'assets_build/build/entrypoints.json'

NPM balíčky Webpack Encore + SASS + FA5 ikonky

Přidat soubor package.json a spustit: npm install (+ přidat node_modules do .gitignore).

{
  "devDependencies": {
    "@fortawesome/fontawesome-free": "5.10.2",
    "@symfony/webpack-encore": "0.28.0",
    "node-sass": "4.13.1",
    "sass-loader": "7.3.1",
    "webpack-notifier": "1.8.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  }
}

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
  // directory where compiled assets will be stored
  .setOutputPath('assets_build/build/')

  // public path used by the web server to access the output path
  .setPublicPath('/static/build')

  // only needed for CDN's or sub-directory deploy
  .setManifestKeyPrefix('static/build/')

  /*
   * ENTRY CONFIG
   *
   * Add 1 entry for each "page" of your app
   * (including one that's included on every page - e.g. "app")
   *
   * Each entry will result in one JavaScript file (e.g. app.js)
   * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
   */

//  .addEntry('app', './assets/js/app.js')
  .addEntry('demo1', './assets/scripts/demo1.js')

  .splitEntryChunks()

  // will require an extra script tag for runtime.js
  // but, you probably want this, unless you're building a single-page app
  .enableSingleRuntimeChunk()

  /*
   * FEATURE CONFIG
   *
   * Enable & configure other features below. For a full
   * list of features, see:
   * https://symfony.com/doc/current/frontend.html#adding-more-features
   */
  .cleanupOutputBeforeBuild()

  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())

  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

  // enables Sass/SCSS support
  .enableSassLoader()

  // uncomment if you use TypeScript
  //.enableTypeScriptLoader()

  // uncomment if you're having problems with a jQuery plugin
  // .autoProvidejQuery()

  // uncomment if you use API Platform Admin (composer req api-admin)
  //.enableReactPreset()
;

module.exports = Encore.getWebpackConfig();

Hotovo. Teď už jen přidat např. soubor demo1.js do /assets/scripts/ a můžeme buildit.

npm run dev

Další entrypointy přidat řádek addEntry třeba pro každou stránku jeden skriptík.