https://github.com/psoldunov/webflow-webpack-starter
Webpack starter configuration for Webflow projects
https://github.com/psoldunov/webflow-webpack-starter
css typescript webflow webpack
Last synced: 27 days ago
JSON representation
Webpack starter configuration for Webflow projects
- Host: GitHub
- URL: https://github.com/psoldunov/webflow-webpack-starter
- Owner: psoldunov
- License: other
- Created: 2023-01-30T17:55:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-24T14:20:43.000Z (about 3 years ago)
- Last Synced: 2025-10-11T20:20:56.861Z (8 months ago)
- Topics: css, typescript, webflow, webpack
- Language: JavaScript
- Homepage:
- Size: 78.1 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Webpack Starter Project for Webflow
This project was created to help manage custom code in a Webflow project. It uses Webpack and supports ES2015 import/export syntax, npm packages, custom CSS/SASS, and Typescript. The "watch" command allows for live code editing using a cloud storage of choice. When the Webflow project is ready to go live, a "js.txt" file can be generated and added to Webflow as a document for use in custom code fields.
## Features
- Webpack
- CSS/SASS loader
- Typescript
- Source mapping for dev build
## Usage
- Download and run `npm install` to install Webpack and dependencies
- Build custom code bundle with `npm run build` (output in `dist/` folder)
- Start Webpack in watch mode with `npm run watch`
## SRC folder
The `src/` folder only requires one file: `index.ts`. The folders `components/`, `function s/`, `plugins/`, `pages/`, and `styles/` have established shortcuts (aliases) in Webpack, so they can be directly referenced in import statements.
## Configuration
In `./wfconfig.js` there are 3 configurable options:
- `bundleName`: name of bundle in` dist/` folder
- `cloudPath`: path to cloud folder on your machine for dev copy of bundle
### CSS
CSS files can be used with Webpack. See examples in `src/` folder for import examples.
### Watch Mode
Webpack watch mode will include source map in the inline bundle (resulting in large file size). The `npm run build` command will produce a minified bundle without source map in a '.js.txt' format suitable for deployment in Webflow.
### Cloud folder for watch mode
Use services like Dropbox or Google Drive. Change the link for Dropbox inside Webflow custom code section as follows:
Default: `https://www.dropbox.com/s/asdfdgsvgcvsf23/app.js?dl=0`
Webflow-ready: ``
## Contributing
Feel free to use or modify this project. If you appreciate it, consider buying me a coffee.
