Basic understanding

Read the below article to understand the need of a module bundler, package manager, task runner and to understand modern javascript

Read this article ↗️

Why Webpack

Read this article ↗️

Installation

npm i --save-dev webpack webpack-cli

No configuration webpack

• We can use webpack to bundle our files without webpack config file

• Run ./node_modules/.bin/webpack index.js --mode=development or npx webpack

• Webpack will look for index.js file in src directory

• bundled output will be generated as dist/main.js by default

Basic concepts

• Loaders

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  }