Minimal Setup for Webpack

You can set up Webpack without a configuration file by using the default settings and specifying options directly via the command line. This approach leverages Webpack's built-in defaults and allows for a minimal setup.

Step-by-Step Minimal Setup Without a Configuration File

1. Initialize your project: Open your terminal, create a new directory for your project, navigate into it, and initialize a new Node.js project:

mkdir minimal-webpack-project
cd minimal-webpack-project
npm init -y

2. Install Webpack and Webpack CLI:

npm install --save-dev webpack webpack-cli

3. Create the source directory and entry file: Create a src directory and an index.js file inside it:

mkdir src
touch src/index.js

Add some simple JavaScript to index.js:

// src/index.js
console.log("Hello, Minimal Webpack!");

4. Add build scripts to package.json: Open your package.json file and add a build script:

"scripts": {
  "build": "webpack"
}

5. Run the build process: In your terminal, run:

npm run build

You should see output similar to this:

asset main.js 1.44 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 664 bytes 3 modules
cacheable modules 333 bytes
./src/index.js 57 bytes [built] [code generated]

This indicates that Webpack has successfully bundled your JavaScript files. You should now have a dist directory with a main.js file in it.

Summary

With this setup, you have configured Webpack to:

• Take ./src/index.js as the entry point.
• Output the bundled code to a file named main.js in the dist directory.

This approach uses command-line arguments to provide the minimal configuration needed to get Webpack running without the need for a webpack.config.js file. This method is suitable for simple projects or for getting started quickly with Webpack. As your project grows, you may find it beneficial to create a configuration file to manage more complex settings and customizations.