Webpack Project Abstract Pattern Design

This project uses Webpack, this is really good js pattern project that can be used by react, vue, or just js or ts developers.

If you want to include eslint, just add .eslintrc file to top level of your project.

• Download all needed packages:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript babel-eslint babel-loader clean-webpack-plugin copy-webpack-plugin cross-env css-loader css-minimizer-webpack-plugin csv-loader eslint file-loader html-webpack-plugin mini-css-extract-plugin node-sass raw-loader sass-loader style-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server xml-loader

• You should also set scripts to your package.json file:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --mode development",
  "build": "cross-env NODE_ENV=production webpack --mode production",
  "watch": "cross-env NODE_ENV=development webpack --mode development --watch",
  "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
},

In order to enable NODE_ENV=development, on your terminal paste this, if your operating system is windows:

set NODE_ENV=development

So at the end, when you config your project carefully and correctly, after testing it on development mode switch to npm build and deploy it on Vercel.com which is great way to test your projects on deployment process and see how they react in this environment. Well that's it!