/WebPack-Linters-Configurations

If you are full familiar with the webpack, this repo will save lots of your time configuring webpack and linters.

Primary LanguageJavaScriptMIT LicenseMIT

WebPack Configurations:

  1. Download this repository.
  2. Copy the content of it to your own newly-created repo and run the following commands consecutively.
  3. Initialize npm:
npm init -y
  1. Install WebPack
npm install webpack webpack-cli --save-dev
  1. Install style-loader and css-loader.
npm install --save-dev style-loader css-loader
  1. install HtmlWebpackPlugin plugin:
npm install --save-dev html-webpack-plugin
  1. Install webpack-dev-server:
npm install --save-dev webpack-dev-server
  1. Go to the package.json file and in the script property replace the following code with its previous value:
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open",
"build": "webpack"
  1. Run following command to generate dist directory and its necessary file:
npm run build
  1. Run following command to run project on the default browser using webpack-dev-server:
npm start

Linters Configurations:

  1. Install Webhint:
npm install --save-dev hint@7.x
  1. Install stylelint:
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
  1. Install ESLint:
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x