@djx/webpack

Easy webpack builds

Installation

npm install --save-dev @djx/webpack

Usage

To use webpack you create a webpack.config.ts that looks like this:

import * as path from 'path';
import { injectors, createBuild } from '@djx/webpack';

export default createBuild({
  input: 'scripts/index.ts',
  output: 'public/dist/app.js',
  injectors: [
    injectors.typescript(),
    injectors.litElement(),
    injectors.devServer({
      contentBase: 'public'
    })
  ],
});

Then you can just tell the webpack cli to use this config:

webpack --mode 'production' --config webpack.config.ts

Injectors

Injectors define specific behaviors. To use them you simply attach them in your config:

import { injectors } from '@djx/webpack';

injectors.litElement

To achieve scss imports for LitElement a more sophisticated setup is required. This injector simplifies the process by combining all the different options and loaders in a single unit. This workflow creates the necessity for "sassDependencies", since SCSS files are now shipped with the package. This means you have to tell webpack in your compiler which scss files to include in advance. You do this by exposing them in your package.json like this:

{
  "sassDependencies": [
    /** Search inside modules **/
    "~@djx/scss/mixins/fluid-size.scss",

    /** Use internal dependencies **/
    "./lib/vars.scss"
  ]
}

The ~ prefix tells the compiler to search inside node_modules only

injectors.typescript

Just a simple typescript loader with some options.

injectors.scss

A simple SCSS compiler. Nothing special about it.

injectors.devServer

Configure the webpack-dev-server if used.

injectors.glslify

Configure glslify to import shaders (.glsl, .vert, .frag):

import vertexSource from './shaders/vertex.glsl';

To use ES6 imports with typescript include this in your declerations

declare module '*.glsl' {
  const value: string
  export default value
}
declare module '*.vert' {
  const value: string
  export default value
}
declare module '*.frag' {
  const value: string
  export default value
}

injectors.pugTemplate

Configure pug templates with pages as entrypoints:

injectors.pugTemplate({
  data: {
    custom: 'data to inject as locals'
  },
  paths: {
    pages: './path/to/pages'
  }
})

injectors.copyFiles

Copy files to the dist and dev build:

injectors.copyFiles({
  patterns: [
    { from: './assets/fonts', to: 'fonts' }
  ]
})