如何配置Webpack 4的自定义Entry与Output？

Hey there! Let me break down how to set up custom Entry and Output configurations in Webpack 4 clearly—this is way simpler than it might seem if the tutorials you've seen skipped over it. Let's get into it.

The entry point tells Webpack where to start bundling your code. You can configure it in a few different ways depending on your project needs:

Single Entry Point #

For a basic single-page app, this is all you need:

module.exports = {
  entry: './src/index.js' // Relative path to your main JS file
};

Webpack will start at this file and bundle all its dependencies into one output file.

Multiple Entry Points (Object Syntax) #

Perfect for multi-page apps where you need separate bundles for different parts of your site:

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin-panel.js',
    checkout: './src/checkout-flow.js'
  }
};

Each key here becomes a "chunk name" that you can reference in your output settings.

Multiple Files, Single Bundle (Array Syntax) #

If you want to combine multiple files into one single bundle (like including a vendor library alongside your main code):

module.exports = {
  entry: ['./src/index.js', './src/vendor/jquery.js']
};

Webpack will bundle both files into a single output file.

The output section defines where Webpack puts your bundled files, and how to name them. First, you'll need to import Node's path module to handle absolute paths (required for the path property).

Basic Output Setup #

Here's a standard configuration for a single entry:

const path = require('path'); // Don't forget to import this!

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js', // Name of the bundled file
    path: path.resolve(__dirname, 'dist') // Absolute path to output directory
  }
};

path.resolve(__dirname, 'dist') tells Webpack to create a dist folder in your project root and put the bundle there.

Output for Multiple Entry Points #

When using the object syntax for entry, use the [name] placeholder to generate unique filenames for each chunk:

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin-panel.js'
  },
  output: {
    filename: '[name].bundle.js', // Generates main.bundle.js and admin.bundle.js
    path: path.resolve(__dirname, 'dist')
  }
};

Cache-Friendly Filenames (Content Hashes) #

To leverage browser caching (so users don't re-download unchanged files), add a content hash to your filenames. Webpack will only change the hash if the file's content updates:

output: {
  filename: '[name].[contenthash].bundle.js', // e.g., main.abc123.bundle.js
  path: path.resolve(__dirname, 'dist')
}

Public Path for Assets #

If your bundled files are hosted on a CDN or in a subdirectory, use publicPath to set a base URL for all assets:

output: {
  filename: '[name].[contenthash].bundle.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/assets/' // All asset references will start with /assets/
}

Putting it all together, here's a complete webpack.config.js with custom entry and output:

const path = require('path');

module.exports = {
  mode: 'production', // Add mode (development/production) for Webpack 4 defaults
  entry: {
    main: './src/index.js',
    dashboard: './src/user-dashboard.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/static/'
  }
};

A quick note: Always use absolute paths for the output.path property—relative paths will throw an error. The path.resolve method takes care of this by generating an absolute path based on your project's root directory.

Hope this helps you get your Webpack 4 config set up exactly how you need it!

内容的提问来源于stack exchange，提问作者David Essien