@atir-naveed-geeksltd/webpack-config

Webpack Config

What is webpack?

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

About

webpack configuration recommended by Medly to bundle the assets in your projects.

Shared webpack config

Install

yarn add -D @atir-naveed-geeksltd/webpack-config

Usage

1. Use default settings

Add below code in your package.json

{
 "script": {
  "watch": "webpack serve --open --mode development --config node_modules/@atir-naveed-geeksltd/webpack-config",
  "dist": "webpack --mode production --config node_modules/@atir-naveed-geeksltd/webpack-config",
  "dist:analyze": "npm run dist -- --analyze"
 }
}

2. Overwrite default settings

Add webpack.dev.js file at root level with below code

const { configure } = require('@atir-naveed-geeksltd/webpack-config');

module.exports = configure({
 devServer: {
  port: 8090
 }
});

Add below code in your package.json

{
 "script": {
  "watch": "webpack serve --mode development --config webpack.dev.js"
 }
}

Default config

You can view the default config here