Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published


    Build Status Build Status License: MIT npm version

    A webpack plugin which automatically sets up webpack entrypoints using filename conventions.


    $ yarn add @shopify/magic-entries-webpack-plugin


    Setting up entrypoints in webpack works well enough, but large applications, repos containing multiple logical sub-applications, or tools and meta-frameworks attempting to automate front end tooling may want to be able to automate it.

    When to use this:

    • Your projects has developed highly complex webpack configurations that are maintained by a small portion of the team and fully understood by fewer.
    • Your project frequently adds/removes/changes entrypoint configuration.
    • Your project is a tool or metaframework attempting to automate configuration of webpack.
    • Your project is large enough or has enough entrypoints that it is difficult to tell what files are an entrypoint and what files are regular old modules

    When not to use this:

    • Your build tool or metaframework already does something like this for you
    • Your app is small and only has a single entrypoint anyway
    • Your app rarely needs to add, remove, or change entrypoints
    • Your team tend to all be comfortable editing webpack configurations and your app is simple enough that it is low risk to do so


    Default behaviour

    The default behaviour of the plugin is to populate the entry option of your webpack config with an entry for every file in the root of your project that matches the glob *.entry.server.{jsx,js,ts,tsx}. Thus a file named main.entry.js would be picked up as the main entrypoint. This behaviour can be configured via the options object passed to the plugin.


    To setup the plugin first import it into your webpack config

    import {MagicEntriesPlugin} from '@shopify/magic-entries-plugin';

    and then pass an instance of it to the plugin array.

    plugins: [new MagicEntriesPlugin()],


    A minimal webpack config with the default settings of the plugin might look like:

    // webpack.config.js
    // this webpack config is just an example, it's not meant to be production ready or anything
    const MagicEntriesPlugin = require('@shopify/magic-entries-webpack-plugin');
    exports = {
      mode: 'production',
      optimization: {
        minimize: true,
      output: {
        filename: '[name].js',
      plugins: [new MagicEntriesPlugin()],

    Server and client presets

    Some universal applications (such as react applications using server-side-rendering) may need to have a different set of entrypoints for the client and server environments.

    To provide for this common usecase, the plugin comes with presets for client and server accessible via the .client and .server static methods.

    // the same as the default behaviour except it looks for files matching '*.entry.server.{jsx,js,ts,tsx}'
    plugins: [new MagicEntriesPlugin.server()],
    // the same as the default behaviour except it looks for files matching '*.entry.client.{jsx,js,ts,tsx}'
    plugins: [new MagicEntriesPlugin.client()],

    Using these in the appropriate webpack builds allows convention based entrypoints in both cases without accidentally compiling your client code on the server or vice-versa.


    By default this plugin has opinions about how entrypoints should look (specifically ending in .entry.{js,ts} and in the root of the application). If a different convention is better suited to your codebase it also accepts a configuration object with the following interface:

    interface Options {
      // The pattern passed to `glob` to find all the entrypoints
      // default: '*.entry.{jsx,js,ts,tsx}'
      pattern: string;
      // the folder or folders to run the glob in (relative to the webpack context)
      // default: '.'
      folder: string | string[];
      // how to derive the name of the entrypoint from it's file path
      // default: the file's basename stripped of it's extensions
      nameFromFile: (file: string) => string;


    In this example the plugin is configured to use all js files in the /entrypoints folder as entrypoints.

    new MagicEntriesPlugin({pattern: '*.js', folder: 'entrypoints'});




    npm i @shopify/magic-entries-webpack-plugin

    DownloadsWeekly Downloads






    Unpacked Size

    34.6 kB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar