webpack-project-starter

Welcome to my webpack starter for microverse projects. This is for general projects. For phaser game development, use this starter

Setup

clone repo and run

npm install

Project structure

All files are in src folder. There is no need for a dist folder. script tags and style tags for files in src in html are also not necessary. They will be auto injected by webpack. You can put CDN links for bootstrap, font-awesome etc in the html file in src folder.

• Write your html in src/index.html file.
• Write your javascript in src/.
• Write your styles in src/index.scss and import it in index.js

import 'index.scss';

• The final project assets will be in the dist folder after the build command in production section below. This is useful for publishing to github and for the lighthouse linter in github.

For development

You have live updates for javacript and scss in localhost:3000. Refresh after changes to html.

1. Run this in your terminal and keep it running, the project will be available live with hot reloading at localhost:3000. Happy programming : )

npm run dev

2. Keep the import for scss in index.js if you want scss styles.

import 'index.scss';

You can change localhost:port number in webpack/webpack.config.dev.js's port property

  devServer: {
    contentBase: "./dist",
    hot: true,
    port: "3000", //change here to your port
  }

Html in dist folder

if you want html in dist folder instead of src folder remove the plugin HtmlWebpackPlugin. You can also remove the Dotenv plugin if you are not using any .env file.

  plugins: [
    new Dotenv(),
    new HtmlWebpackPlugin({         //remove this line
      filename: "index.html",       // remove this line
      template: "/src/index.html",  //remove this line
      inject: true,                 // remove this line
    }),                             // remove this line
  ],

Env file for environment variables such as API_KEY

create an .env file for your variables

API_KEY=20r8304283yourkeyexample

and import it in js

const API_KEY  = process.env.API_KEY

• Your eslint might use destructuring syntax { API_KEY }. As said in the documentation for dotenv-webpack, please use the syntax I have shown above if the environment variable is undefined

if you are not using any environment variables, you can also safely remove the new Dotenv() plugin from the webpack config files.

For linters

All commands have --fix appended internally already.

One command for all linters

npm run linters

Standalone linters

• eslint

npm run eslint

• stylelint

npm run lint

• webhint

npm run hint

For production

One command to create production code and publish it live on github. Run this after project completion. Also helpful for lighthouse linter on github pull request.

npm run publish

or seperately run,

1. Build final production project build

npm run build

2. Run in terminal to push your createddist folder to github to get a live website on github

npm run live

Thank you for using the project.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Author

👤 Samrood Ali

• GitHub: @samroodAli
• LinkedIn: Samrood-Ali