Basic setup that you can use for your Webflow website with:
jQuery is declared as an dependance and flagged as external in webpack. Feel free to add more if you import dependencies directly in Webflow.
- Clone the repo by clicking on Use this template.
- Install all of the dependancies with
npm install - Open VSCode.
- Open your webflow site, and add to a page (for ex. home) custom code before
</body>:
<script type="module" src="http://localhost:8080/home.js"></script>- In the same place add custom code to
<head>:
<link rel="stylesheet" href="http://localhost:8080/home.css">- Now let's go back to VSCode and run
npm run serveand enjoy developing as it was meant to. - This boilerplate has HMR implemented, so once you make any changes to the code it will be auto-updated on your webflow site.
- Use
npm buildand upload the files from the./distfolder onto your preferred CDN. - Change imports in Webflow to those of your CDN.
Open config.js.
Your webflow site url, once specified on npm run serve it will open your site in the browser
Default 8080. Feel free to change.
List of all pages you will be writing your code for. It's used by webpack to create separate entry points and chunks. For ex. we've home: './src/home.ts'. If you want to add another one then you create a new entry another: './scr/another.ts' - please use home.ts as a template.
List of all external dependencies that won't be bundled. By default jQuery is added.
This project is using npm, but if you like yarn more, then feel free to switch to it. It doesn't really matter.
First, install dependencies:
npm installTo launch a local dev server:
npm run serveTo create a production build:
npm buildTo clean the local /dist folder:
npm run cleanTo lint the code with ESLint and Prettier:
npm run lintOnce you click CMD + SHIFT + B on Mac or CTR + SHIFT + B on Windows you can use prebuild task in VSCode.
As a name suggests, it runs npm ren serve.
Production-ready build with a sequence of npm run clean and npm build.