All Projects â†’ infinum â†’ webpack-asset-pipeline

infinum / webpack-asset-pipeline

Licence: MIT License
🚀 A missing link for the asset pipeline alternative with Webpack.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to webpack-asset-pipeline

kirby-hashed-assets
🛷 File name hashes support for css() and js() helpers. Without rewrite rules!
Stars: ✭ 15 (-51.61%)
Mutual labels:  manifest, assets
Assimp
The official Open-Asset-Importer-Library Repository. Loads 40+ 3D-file-formats into one unified and clean data structure.
Stars: ✭ 7,309 (+23477.42%)
Mutual labels:  asset-pipeline, assets
django-manifest-loader
Simplifies webpack configuration with Django
Stars: ✭ 105 (+238.71%)
Mutual labels:  manifest, assets
phoenix assets webpack
Asset Pipeline with Webpack on Phoenix
Stars: ✭ 52 (+67.74%)
Mutual labels:  asset-pipeline, assets
core
🔥 Antares Core Implemenation. Most important project layer, this is the heart for your app. ACL, notifiter, console, geoip, areas, utils and many more...
Stars: ✭ 24 (-22.58%)
Mutual labels:  asset-pipeline, assets
django-webpack-starter
Django Webpack starter template for using Webpack 5 with Django 3.1 & Bootstrap 4. Yes, it can hot-reload.
Stars: ✭ 52 (+67.74%)
Mutual labels:  assets
gakubuchi
📄 Static pages management with Asset Pipeline
Stars: ✭ 46 (+48.39%)
Mutual labels:  asset-pipeline
fingerprint-brunch
A brunch plugin for cache busting assets
Stars: ✭ 15 (-51.61%)
Mutual labels:  assets
disclosedassets
DEPRECATED Allow your clients to find asset sub-folders by disclosing them by default
Stars: ✭ 13 (-58.06%)
Mutual labels:  assets
GemsAssetsWebpackBridge
It helps to build a bridge from ruby gems' assets to Webpack
Stars: ✭ 20 (-35.48%)
Mutual labels:  assets
DAMN
Don't ask me now! Go-ogle
Stars: ✭ 14 (-54.84%)
Mutual labels:  manifest
angular-pwa-starter
Lightweight starter 'ng init' with added app shell features (sw-precache, web app manifest).
Stars: ✭ 22 (-29.03%)
Mutual labels:  manifest
Stamp-Craft
Plugin for adding timestamp to filenames.
Stars: ✭ 28 (-9.68%)
Mutual labels:  assets
js-namespace-rails
js-namespace-rails let you choose which javascript snippet can execute in rails assets pipeline
Stars: ✭ 57 (+83.87%)
Mutual labels:  assets
opendev
OpenDev is a non-profit project that tries to collect as many resources (assets) of free use for the development of video games and applications.
Stars: ✭ 34 (+9.68%)
Mutual labels:  assets
towards5gs-helm
Open-source project providing Helm charts for deploying Free5GC and UERANSIM on a Kubernetes cluster
Stars: ✭ 53 (+70.97%)
Mutual labels:  manifest
phaser-webpack-loader
Asset loader for Phaser + Webpack.
Stars: ✭ 85 (+174.19%)
Mutual labels:  assets
metagraf
metaGraf is a opinionated specification for describing a software component and what its requirements are from the runtime environment. The mg command, turns metaGraf specifications into Kubernetes resources, supporting CI, CD and GitOps software delivery.
Stars: ✭ 15 (-51.61%)
Mutual labels:  manifest
postcss-copy
An async postcss plugin to copy all assets referenced in CSS files to a custom destination folder and updating the URLs.
Stars: ✭ 39 (+25.81%)
Mutual labels:  assets
custom-elements-manifest
Custom Elements Manifest is a file format that describes custom elements in your project.
Stars: ✭ 81 (+161.29%)
Mutual labels:  manifest

webpack-asset-pipeline

Greenkeeper badge

A missing link for the asset pipeline alternative with Webpack.

Build Status npm version

This plugin can be used to flush a list of your assets to a manifest.json file and replace the asset pipeline.

Usage

This is a Webpack plugin that creates a manifest file for your assets. It can output files to Webpack (as emitting) or as a file on the filesystem.

npm install --save-dev webpack-asset-pipeline

In your webpack.config.js file specify the plugin:

const WebpackAssetPipeline = require('webpack-asset-pipeline');

{
  plugins: [
    new WebpackAssetPipeline()
  ]
}

You'll find the manifest.json file in your output directory. You can read more about the options here.

Requiring images

All images have to be required in the JavaScript in order for webpack to process them, except the ones you require in your scss file (because wepback is processing your scss file adready)

You can create a new file which will hold all the images, e.g. files.js

require('images/file1.jpg');
require('images/file2.jpg');
require('images/file3.jpg');

And then in application.js (your entrypoint)

require('files');

You can see an example configuration and its documentation here.

Output

Once you set everything up, you should see this in your manifest.json file:

{
  "images/file1.jpg": "963eb32907744d9a0d6b98127162808f.jpg",
  "images/file2.jpg": "162808f4d9a0963eb3290774127d6b98.jpg",
  "images/file3.jpg": "d6b98127162969a0808f3eb32907744d.jpg"
}

Compatibility

This plugin is compatible with Webpack 1.x and 2.x.

Integrations

Ruby on Rails

Requiring assets in Rails will be a bit different and needs some configuration. Read our Rails helper documentation.

Others

We're open for pull requests that add instructions about how to integrate this plugin with other frameworks.

License

The MIT License

© 2016 Infinum Inc.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].