Webpack Template Base

Overview:

This is a ready-made webpack template that includes optimization and minimization features for JavaScript (babel, core-js), SCSS, and HTML. It also includes image compression, font handling, code checking with ESLint, smart-grid support, webpack-dev-server, jest support with code coverage, the ability to use global variables like ENV, and error descriptions displayed directly in the browser. It also includes a plugin that allows for the removal of code blocks, making it suitable for production use.

Features:

• Optimization and Minimization: Includes optimization and minimization for JavaScript (babel, core-js), SCSS, and HTML.
• Image Compression: Supports image compression to optimize file sizes.
• Font Handling: Provides font handling capabilities for the project.
• Code Checking with ESLint: Includes code checking with ESLint to ensure code quality and consistency.
• Smart-grid Support: Supports smart-grid mixins for easier adaptive project layout.
• Webpack-dev-server: Includes webpack-dev-server for comfortable development and debugging.
• Jest Support with Code Coverage: Supports jest testing framework with code coverage analysis.
• Global Variables (ENV): Allows for the usage of global variables like ENV in the code.
• Code Block Removal Plugin: Includes a plugin that allows for the removal of code blocks, useful for production deployment.

Installation:

To install the webpack template, follow these steps:

1. Clone the repository by running git clone.
2. Change to the cloned directory using cd webpack-template-base.
3. Run npm install to install the dependencies.

For using smart-grid:

1. Run the command npm run smart-grid.
2. The file _smart-grid.scss will appear in the SCSS/UTILS folder. Include this file where you want to apply the grid.

For development:

• Run npm run dev to start the development environment. It includes source maps for easier debugging.

Using global variables (ENV):

• The variables are exported in the webpack.dev.conf.js file.
• You can use them in your code like process.env.VARIABLE_NAME.

Code block removal plugin:

• To remove code blocks in HTML, enclose the code between deletestart and deleteend comments.

For production:

• If you have used global variables, set the APP_ENV=prod variable.
• Run npm run prod to generate the dist folder containing the minified/compressed code.

Code checking:

• Run npm run lint to check the correctness of the code.

Testing:

• Run npm run test to run the tests.