Setting up a JS project with Webpack and ESLINT
I just started using Webpack and ESLINT. Everytime I use it I have had to either go back to the documention or to a video tutorial, this can either be good or bad. Yes, it helps me understand it better, but also sometimes there is just too much information about extra pluggins, libraries or other stuff I don't need at the moment which ends up just adding extra noise.
To help my self to remember the most basic stuff in a quick manner, I decided to make a quick guide on how to set up a project utilizing Webpack as a bundler and ESLINT to keep my code more consistant and following the best standards.
With that said, It's very important to keep your self updated to any changes in either Webpack or ESLINT. For that reason, under every step of this guide there will be a link to more information (the official documention) about said step, including pluggins and packages used.
This guide is quick by all means, I won't go into details on how things work, by this point you should already have an idea of what to expect from Webpack and ESLINT.
Github
Create a new repository in Github.
Choose a name for your new repository.
Add a README file.
Create Repository.
Navigate to the main page of the repository and copy the SSH key.
Open the terminal, and change the current working directory to the location where you want the cloned repository. Type git clone and then paste the SSH after.
Directories
Create the next directories and files (wolfushima.jpg can be any img):
Write the code corresponding to their file name (this is to test everything works properly when running webpack)
Webpack
Create a package.json file.
In package.json add the next property/value:
In package.json add the next two properties/values inside “scripts”:
Add a .gitignore file to your project directory and type node_modules inside the file.
Install Webpack
Loaders
style-loader and css-loader
sass-loader
html-loader
Plugins
html-webpack-plugin
mini-css-extract-plugin
css-minimizer-webpack-plugin
Packages
webpack-merge
Development Tools
webpack-dev-server
Your “devDependencies” inside the package.json file should look something like this:
Add 3 new files to your project directory: webpack.common.js, webpack.dev.js and webpack.prod.js
Write the code corresponding their file name.
Testing if everything works properly:
To run webpack in Development mode type in your terminal: npm start
This should open a new page in the browser, show your webpage and console log "Hello" and "World".
To run webpack in production mode type in your termina: npm run build
This should create a new directory dist including your bundled and minimized files.
To open your new bundled index.html file you can type in your terminal: xdg-open dist/index.html
It should open something like this:
ESLint
Install ESLint (before this you should already have a package.json file).
Initialize an ESLint configuration for your project using the following command:
Now you will be prompted with some questions:
How would you like to use ESLint?
Choose To check syntax, find problems, and enforce code
What type of modules does your project use?
Choose JavaScript module (import/export)
Which framework does your project use?
Choose None of these
Does your project use TypeScript?
Choose No
Where does your code run?
Choose Browser
How would you like to define a style for your project?
Choose Use a popular style guide
Which style guide do you want to follow?
Choose Airbnb
What format do you want your config file to be in?
Choose JSON
Would you like to install them now with npm?
Choose Yes
Formatting on Save
Press Ctrl+Shift+P or use the command palette to open Preferences: Open Workspace Settings (JSON), and then write the following code in settings.json
