Skip to content

Latest commit

 

History

History
99 lines (89 loc) · 3.89 KB

README.md

File metadata and controls

99 lines (89 loc) · 3.89 KB
Raw

🚀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