Skip to content

πŸš€ Webpack 4 Boilerplate with Babel, TypeScript, SASS or SCSS, Less, browser autoprefixer, image compressor, dev server and etc

License

Notifications You must be signed in to change notification settings

MR-Mostafa/webpack-boilerplate

Repository files navigation

πŸš€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:

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:

License:

webpack4 boilerplate released under the MIT License