3.3.2.3 Output

The ‘output’ property tells webpack where to emit the bundles it creates and how to name these files.

It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

You can configure this part of the process by specifying an ‘output’ field in your configuration. The minimum requirement for the ‘output’ property in your webpack configuration is to set its value to an object and provide an ‘output.filename’ to use for the ‘output’ file(s). This configuration would output a single bundle.js file into the dist directory.

// minimum
module.exports = {
  output: {
    filename: 'bundle.js',
  }
};

// minimum with path
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name.

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

// writes to disk: ./dist/app.js, ./dist/search.js