MR-Mostafa / webpack-boilerplate

🚀 Webpack 4 Boilerplate with Babel, TypeScript, SASS or SCSS, Less, browser autoprefixer, image compressor, dev server and etc

^🚀webpack4 boilerplate

Webpack 4 Boilerplate with Babel, TypeScript, SASS or SCSS, Less, browser autoprefixer, image compressor, dev server and etc.
This is a lightweight foundation for your next webpack based frontend project.

Setup:

1. git clone https://github.com/MR-Mostafa/webpack4-boilerplate.git
2. run npm install in project folder
3. then select one of these modes to compile your project
   
   • npm run build:dev for development mode
   • npm run build:prod for production mode
   • npm run watch:dev for development and watch mode (runs on http://localhost:3000)

Features:

• ES6 Support via babel
• TypeScript Support via ts-loader
• SASS Support via sass-loader
• Less Support via less-loader
• Autoprefixer via autoprefixer
• Linting via eslint and stylelint
• image compressor via image-webpack-loader
• Creation of HTML files via html-webpack-plugin
• and etc ...

Folder Structure:

├── webpack.config.js
├── package.json
├── src
|    ├── fonts
|    ├── images
|    ├── js
|    ├── layouts
|    |    ├── index.html (main template)
|    |    └── general
|    |        ├──  style.html (your style)
|    |        └──  script.html (your script)
|    ├── less
|    └── sass
|
└── build
    ├── css
    ├── fonts
    ├── images
    ├── js
    └── index.html

Auto Creation of HTML files:

We will be using html-webpack-plugin for creation of HTML files to serve your webpack bundles. To use this plugin:

• Open the webpack.config.js and add the following code to config.plugins (on line 147)
• You need to change the values of template and filename. The rest of the values are created automatically and do not need to be changed in most cases

new HtmlWebpackPlugin({
    template: './src/layouts/index.html',
    filename: 'index.html',
    inject: mode  === 'production' ? false : true,
    chunks: mode  === 'production' ? [] : true,
    excludeChunks: excludeChunks,
    mode: mode,
    staticFile: staticFile,
}),

Other options:

• RemoveFileAfterBuild (on line 16)

  • This variable represents the file name in './src/js' that remove after build.
  • With this feature you can delete unnecessary files.
  • this feature works in only 'production' mode
  • e.g: const RemoveFileAfterBuild = ['file1.js', 'file2.js'];

• copyStaticFile (on line 28)

  • If you want to copy a file (files) without changing it during of the build, You must complete this variable.
  • These files are copied to the build folder
  • e.g:

    const copyStaticFile = [
        { from: './src/js/script.js', to: './js/script.js' },
        { from: './src/css/style.css', to: './css/style.css' },
        { from: './src/LICENSE.txt', to: './LICENSE.txt' },
    ];

• entry (on line 38)

  • entry webpack (The point or points where to start the application bundling process.)
  • e.g:

    const entry = {
        index: './src/js/entry/index.js',
        single: './src/js/entry/single.js',
    };

Note: This bundler does not config for react or vue.

Author:

• Mostafa Rahmati

License:

webpack4 boilerplate released under the MIT License