---
title: "Configuring NPM and Webpack"
slug: "configuring-npm-and-webpack-1"
description: "NavVis IVION Frontend API: configuring node package manager and webpack"
updated: 2024-02-23T16:25:48Z
published: 2024-02-23T16:25:48Z
canonical: "knowledge.navvis.com/configuring-npm-and-webpack-1"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.navvis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuring NPM and Webpack

If you are using NPM and Webpack, you will need to configure them to move the static HTML templates into the directory where files are served.

## Procedure

1. Open `package.json` from the root project directory and add `copy-webpack-plugin` as a development dependency by running:

```plaintext
// package.json line #13
// ...
"devDependencies": {
  "copy-webpack-plugin": "^4.6.0",
  "css-loader": "^1.0.1",
// ...
```
2. Open `webpack.config.js`, import `copy-webpack-plugin`, and configure the static elements to be copied into the serving directory by running:

```plaintext
// webpack.config.js line #1
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
```

```plaintext
// webpack.config.js line #32
plugins: [
  new HtmlWebpackPlugin({
    template: "src/index.html",
    favicon: 'src/image/favicon.ico'
  }),

  // Configure plugin to copy static elements
  new CopyWebpackPlugin([
    {
      from: 'src/lorem-ipsum-formatted.html',
      to: ''
    },
    {
      from: 'src/image/ipse-dixit.png',
      to: ''
    },
    {
      from: 'src/image/greek-statue-face.png',
      to: ''
    }])
],
// ...
```