@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' }
]
})