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 https://github.com/prod3v3loper/generator-webpack-preact.git /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-preactInstall with npm and use with Yeoman
Switch to the projects folder.
username$ cd /Users/username/projects/projects$ npm i generator-webpack-preactprojects$ yo webpack-preactPromts 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/nHow 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 releaseYou 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 and check also in my tutorial for Webpack, that will probably help you with this topic. Webpack project example