IcePanel Webpack

npm version npm size npm downloads github issues github prs

This is the preferred method of building IcePanel plugins.


First install the icepanel webpack package into your project as a development dependency.

npm install @icepanel/webpack --save-dev
# or
yarn add -D @icepanel/webpack

We recommend using the following toolset for IcePanel development as demonstrated in the official ice-plugins repository.

npm install typescript ts-loader @angular/core @angular/common @angular/platform-browser @angular/material angular2-template-loader raw-loader sass-loader node-sass webpack-cli --save-dev
# or
yarn add -D typescript ts-loader @angular/core @angular/common @angular/platform-browser @angular/material angular2-template-loader raw-loader sass-loader node-sass webpack-cli


Include the following configuration in webpack.config.js at the root of your project.

const { IcePackPlugin, IcePackLiveReload, externals } = require('@icepanel/webpack')

module.exports = {

  plugins: [

    // build an .icepack package as an asset
    new IcePackPlugin({
      definition: 'icepack.yml' // optional

    // install the resulting asset on a running local or remote IcePanel instance
    new IcePackLiveReload({
      host: '' // optional

  // stops unnecessary dependencies from being bundled with the plugin (these are included in IcePanel itself)
  externals: [externals()],



Create an IcePack build using Webpack.

npx webpack

Create an IcePack build and watch for changes using live reload.

npx webpack --watch

Live reload authentication

To authenticate the live reload plugin with an IcePanel instance you must create a .icepanel-webpackrc file at the root of your project containing an access token. You can create access keys on the settings page within IcePanel.


See the rc package for more details about specifying options.