Generate Webpack with TypeScript, Preact, Redux-Zero and Babel

Last Updated : |  

There are a lot of possibilities with Webpack as it is a powerful bundler. I'll show you a variant that I think is useful and believe that it will be useful to many. If you want to report features or bugs then do so.

This package is about creating a configured environment with Webpack HTML + TypeScript + SASS + Preact + Redux-Zero and Babel.

What this generator offer ?

The generator-webpack-preact saves you from having to re-create everything for your new project every time. The default configuration is always the same when you create it, you can always add it. The biggest advantage here is bundling with Webpack, using TypeScript for ES6 or higher, Preact for TSX and JSX, Redux-Zero for a paged store, and Babel for properly compiling the final product for browsers.

Install with Git and use with Webpack

Install Git to clone with it. Create a Scaffold Templates folder and open your Terminal, to switch in the folder.
username$ cd /Users/username/scaffold/templates/
Clone the repo or download to the place, you want your templates.
templates$ git clone /Users/username/scaffold/templates/
And now install all Dependencies in package.json for the generator
templates$ npm install
Now create your main Projects folder. This folder contains all projects that we then create.
Switch to the projects folder.
templates$ cd /Users/username/projects/
Start the scaffolding with webpack init the webpack-cli init from our scaffold templates folder with the template generator-webpack-preact

projects$ webpack init /Users/username/scaffold/templates/generator-webpack-preact

Install with npm and use with Yeoman

Switch to the projects folder.

username$ cd /Users/username/projects/projects$ npm i generator-webpack-preactprojects$ yo webpack-preact

Promts for the two solutions

These are the questions that are asked one after the other and accordingly your project will be created.

? Customer name? (customer)
? Project year? (2019)
? Project name? (newsletter)
? Components you want to use? (type comma seperated) (counter)
? Want you install all dependencies? Y/n

How to use?

Now run and see the Magic :)
Switch to the new project folder we have created. (You typed in the prompt default newsletter)
projects$ cd /Users/username/projects/customer/year/newsletter
If you not installed dependencies in the prompts, then install first.
newsletter$ npm install
This command start the Server with the hotmodule.
newsletter$ npm run dev
This command build the dist folder with the end product.

newsletter$ npm run release

You have done it when you turn on the dev mode and the welcome window looks in your browser. You finde the generator-webpack-preact in the followed links.

 NPM - Generator Webpack Preact
 Github - Generator Webpack Preact
 Github (Theme Page) - Generator Webpack Preact

Feel free to comment or even find a bug and even if you have a feature idea.

Your Comment

* This fields are required, email don't publish
You can use this tags: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>

This field is optional
Fill this field link your name to your website.

Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
tnado © 2019 | All Rights Reserved
In cooperation with Hyperly