gossr-assets-webpack-plugin v0.1.2

GoSSRAssetsPlugin

GoSSRAssetsPlugin is a Webpack plugin designed to dynamically build static assets for projects utilizing the GoSSR generator. It simplifies the process of managing and bundling assets by automatically detecting and mapping them based on the directory structure.

What is GoSSR?

GoSSR is a tool that generates Go code to render websites based on the directory structure and HTML templates. GoSSR empowers developers to create server-side rendered (SSR) applications in Go with ease. The GoSSRAssetsPlugin complements GoSSR by handling the static assets during the Webpack build process.

Features

• Automatically scans and detects files like images, .ts, and .scss files within your project directories.
• Creates entry points dynamically based on your folder structure, which is ideal for projects with pages or assets organized in nested directories.
• Outputs a webpack-assets.json file that maps your entry points and images for easy use in GoSSR-generated websites.

Installation

To install the plugin, use npm:

npm install gossr-assets-webpack-plugin --save-dev

Usage

Add GoSSRAssetsPlugin to your Webpack configuration. This plugin scans directories (e.g., pages/) and generates entry points for static files like .ts, .scss, and image files.

Example webpack.config.js:

const path = require('path');
const GoSSRAssetsPlugin = require('gossr-assets-webpack-plugin');

module.exports = {
  entry: {}, // Initial entry points are generated by the plugin
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  plugins: [
    new GoSSRAssetsPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
  watchOptions: {
    ignored: ['**/*.go', '**/pages/webpack-assets.json'], // Ignored files
  },
};

Output

During the build process, the plugin generates two main outputs:

1. Entry Points: Dynamic entry points based on directory structure (e.g., pages/).
2. Image Mapping: A JSON file (webpack-assets.json) that maps images and assets for easy integration with GoSSR templates.

Example webpack-assets.json structure:

{
  "entrypoints": {
    "main": ["/dist/main.bundle.js"]
  },
  "images": {
    "logo.png": "/dist/logo.png"
  }
}

Example Project

Check out an example of how GoSSRAssetsPlugin works in conjunction with GoSSR in this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.