Static-directory-loader NPM

static-directory-loader

The static-directory-loader resolves import/require() on a file containing a list of globs, and copies the matched files into the build directory.

Getting Started

To begin, you'll need to install static-directory-loader:

$ npm install static-directory-loader --save-dev

Assuming you have a public directory and you'd like to copy its images, you can specify this by creating a public/index.static file with the following glob:

public/index.static

**/*.{png,jpg}

Then, import the .static file from within a script:

file.js

import './public/index.static'

You'll also need to add the loader to your webpack config. For example:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.static$/,
        use: [
          'static-directory-loader',
        ],
      },
    ],
  },
};

Now run webpack via your preferred method. This will emit any images in the public directory to the build directory.

Keep in mind that you can also include multiple .static files, and all of the files will be merged into the same public directory.

You may also want to add .static as a default extension, so that you can require() or import directories that contain an index.static file:

webpack.config.js

module.exports = {
  resolve: {
    extensions: ['.js', '.json', '.static'],
  },

  module: {
    rules: [
      {
        test: /\.static$/,
        use: [
          'static-directory-loader',
        ],
      },
    ],
  },
};

Options

`outputPath`

Type: String|Function Default: undefined

Specify a filesystem path where the target file(s) will be placed.

`String`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.static$/,
        use: [
          {
            loader: 'static-directory-loader',
            options: {
              outputPath: 'assets',
            },
          },
        ],
      },
    ],
  },
};

`Function`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'static-directory-loader',
            options: {
              outputPath: (pathname, staticFilePath, staticFileDirectory) => {
                return `output_path/${pathname}`;
              },
            },
          },
        ],
      },
    ],
  },
};