Rocket Starter
This is the simplest way to make webpack config with many default settings. This config-generator include modules and features:
- Webpack 4+, Webpack-dev-server
- Support React, Angular 2+, Vue
- TypeScript support
- Babel 7, Babel-preset-env (> 5%)
- Support build nodejs scripts with nodemon and livereload
- Dotenv support
- React optimizations
- Flow
- Write file webpack plugin (in dev mode)
- Copy Webpack Plugin
- ESLint
- Templates: HTML/Jade/Handlebars,nunjucks
- CSS: CSS/SASS/LESS + Postcss
- Postcss: Autoprefixer, Mqpacker, Lost, Instagram filters, Rucksack
- CSS Modules support
- Imagemin
- File import support: Markdown, Video, Audio, Fonts, SVG, Script, Shaders etc
- SVG + SVGO
- Uglifyjs (terser)
- Hard Source Plugin (in production mode)
- Generate stats.json (in production mode)
- SEO Optimizations
- Bundle Analyzer
- Isomorphic compile support (include isomorphic styles, isomorphic dynamic imports, @loadable)
- Multi compile support
- Vendor array splitting support (You can set dependency libraries to this array to split it on separate vendor.js file)
- MDX files support
How it works
You have 4 compilers for your scripts
const frontendCompiler backendCompiler libraryCompiler markupCompiler = ;
all of these compilers can get options object and callback. Callback is a function that will run after your webpack config will compile. This can help you for override some properties (You can see example below).
frontendCompiler(options[optional], callback[optional]);
can compile any frontend application (React, TypeScript, flow, etc)
const frontendCompiler = ; ;
backendCompiler(options[optional], callback[optional]);
can compile nodejs scripts. Can run nodemon.
const backendCompiler = ; ;
if you need to use live-reload in nodejs project you should add
libraryCompiler(libraryName[needed], options[optional], callback[optional]);
can compile UMD library
const libraryCompiler = ; ;
markupCompiler(paths[needed], options[optional], callback[optional]);
can compile markup (HTML, handlebars, jade, nunjucks)
const markupCompiler = ; ;
analyzerCompiler(options[optional], callback[optional]);
compile your application and run webpack-bundle-analyzer
const analyzerCompiler = ; ; //analyzerPort by default 8888
multiCompiler(configArray[needed]);
Multi compilation
let multiCompiler frontendCompiler libraryCompiler backendCompiler = ; ;
isomorphicCompiler(configArray[needed]);
Compile isomorphic app
const isomorphicCompiler backendCompiler frontendCompiler = ; ;
Default Options:
dist: 'dist' src: 'src/index' url: '/' debug: false // Activate debug mode in all plugins or loaders stats: false // Generate stats webpack file write: false // Write files to HDD after changes (watch mode) inline: true // Convert images, fonts, svg to base64 analyzerPort: false //port number, for example: 8888 server: browserSyncPort: false // run with browser-sync port: 3000 host: 'localhost'
All Options
dist: 'dist' src: 'src/index' url: '/' debug: false // Activate debug mode in all plugins or loaders stats: false // Generate stats webpack file write: false // Write files to HDD after changes (watch mode) inline: true // Convert images, fonts, svg to base64 analyzerPort: false //port number, for example: 8888 vendor: 'react' 'react-dom' server: browserSyncPort: false // run with browser-sync port: 3000 host: 'localhost' // secondary properties nodemon: path to nodemon run dotenv: 'path_to_dotend or put .env file to your project' version: false // You can add version to script's filenames styles: String // You can extract CSS styles from scripts, or disable it - set false html: // CopyWebpackPlugin. You can also add array for multi-pages support title: String favicon: ... version: Boolean template: String path to file banner: String // You can set banner in the head of scripts global: // DefinePlugin activate var: 'var1' copy: from: ... to: ... || || files: opts:
TypeScript activation:
- make tsconfig.json
- add config (Example: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
You can run it with NODE_ENV=production - it is active uglifier.
If you want a styles extraction you need to set styles: 'mystyle.css'
If you don't need to extract styles to css file in production version you can set styles: false
"copy" is activate CopyWebpackPlugin and we can use default syntax but we can set files and opts. Opts is second parameter in this plugin.
"write" will force Webpack to save file in HDD after each update webpack watcher / dev-server
You can add eslint config. Just add eslintrc.js in your main (project) dir.
You can add postcss config. Just add postcss.config.js in your main (project) dir.
Add .flowconfig to root folder and that activation flow-type checking