@studiometa/webpack-config-preset-prototyping

A preset for @studiometa/webpack-config to add prototyping support to your project. It includes:

• JS or TS
• SCSS and Tailwind CSS
• Twig for templating with file based routing and dynamic data loading

Usage

Install the package:

npm install --save-dev @studiometa/webpack-config-preset-prototyping

And load the preset in the meta.config.js file:

import { defineConfig } from '@studiometa/webpack-config';
import { prototyping } from '@studiometa/webpack-config-preset-prototyping';

export default defineConfig({
  presets: [prototyping()],
  // ...
});

Documentation

Options

• ts (boolean): use app.ts as entry point instead of app.js
• twig (Object): options for the twig preset
• tailwindcss (Object): options for the tailwindcss preset
• html (Object): options for the html-webpack-plugin plugin
• markdown (Object): options for the markdown preset

Examples

Use it in your meta.config.js file:

import { defineConfig } from '@studiometa/webpack-config';
import { prototyping } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [prototyping()],
});

And set up your project with the following folder structure:

meta.config.js
package.json
public/ --> public assets, served from `/`
...
src/
  css/ --> css files
    app.scss
  js/ --> js files
    app.js
  templates/
    components/ --> component files, aliased to `@components`
    layouts/ --> layout files, aliased to `@layout`
    foo/ --> random files, aliased to `@foo`
    pages/
      index.twig