config.md

Reference

homepage > DOCUMENTATION > Configuration

Problems So Far

1. We have to write this long command.

$ npx webpack --entry ./source/index.js -o ./public

2. We cannot decide the name of the file.

Solution

It is using a configuration file.

Basic

|config.js|

const path = require('path');

module.exports = {
  entry: './source/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    // Unlike writing in cli, we can decide the name of the file.
    filename: 'bundle.js',
  },
};

$ npx webpack --config config.js

webpack.config.js

If the name of the file is 'webpack.config.js', you can omit '--config ~' like this.

$ npx webpack

ES-Module System.

The configuration file also accepts ES-Module system.

import path from 'path';

export default {
  entry: './source/index.js',
  output: {
    path: path.resolve(process.cwd(), 'public'),
    filename: 'bundle.js',
  },
};

But be careful that '__dirname' cannot be used in ES-Module system.

So, this is not possible.

import path from 'path';

export default {
  entry: './source/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
};

If you want to use '__dirname', then change the file extension as 'cjs' and use CommonJS system.