# update-contentful-extension-webpack-plugin

> Webpack plugin for updating Contentful extensions

Latest version **0.1.0** (published 2020-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install update-contentful-extension-webpack-plugin
pnpm add update-contentful-extension-webpack-plugin
yarn add update-contentful-extension-webpack-plugin
bun add update-contentful-extension-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-08-09 |
| First published | 2020-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Asbjørn Hegdahl |
| Maintainers | asbjornh |
| Keywords | contentful, extension, update, webpack |

## Links

- npm: https://www.npmjs.com/package/update-contentful-extension-webpack-plugin
- Repository: https://github.com/asbjornh/update-contentful-extension-webpack-plugin
- Homepage: https://github.com/asbjornh/update-contentful-extension-webpack-plugin#readme
- Issues: https://github.com/asbjornh/update-contentful-extension-webpack-plugin/issues
- npm.io page: https://npm.io/package/update-contentful-extension-webpack-plugin

## Dependencies (1)

- [contentful-cli](https://npm.io/package/contentful-cli.md) ^0.33.2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2020-08-09

## README

# Update Contentful extension Webpack plugin

This plugin will upload or serve a locally running extension to Contentful. This is useful if you like `contentful-extension-scripts` but want to build your extension(s) using Webpack instead. It also makes it easier for extensions to share code (currently not possible using `contentful-extension-scripts`).

The easiest way to get set up is to create a new extension using [create-contentful-extension](https://github.com/contentful/create-contentful-extension). After creating the extension, create your `webpack.config.js` and add and configure this plugin (see below).

## Installation

```
npm install --save-dev update-contentful-extension-webpack-plugin
```

## Example config

The below config assumes that `webpack-dev-server` is used for serving a local extension. When running the `dev` script, the extension will be served from `localhost` and can be viewed at `app.contentful.com`. When running the `deploy` script, the extension is uploaded to `app.contentful.com`.

<details>
<summary>View config</summary>

_package.json_

```json
{
  "scripts": {
    "dev": "webpack-dev-server --mode=development",
    "deploy": "webpack --mode=production"
  }
}
```

_webpack.config.js_

```js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const InlineSourcePlugin = require("inline-source-webpack-plugin");
const MiniCssExtracPlugin = require("mini-css-extract-plugin");
const UpdateContentfulExtensionPlugin = require("update-contentful-extension-webpack-plugin");

module.exports = {
  devServer: { port: 1234 },
  entry: "./src/index.js",
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: [/node_modules/], use: "babel-loader" },
      { test: /\.css$/, use: [MiniCssExtracPlugin.loader, "css-loader"] },
    ],
  },
  plugins: [
    new MiniCssExtracPlugin(),
    new HtmlWebpackPlugin({
      // NOTE: For production all assets need to be inlined. For development we don't want assets inlined since then they would be cached. See the docs for `inline-source-webpack-plugin`
      template: process.env.WEBPACK_DEV_SERVER
        ? "./src/index-dev.html"
        : "./src/index.html",
    }),
    new InlineSourcePlugin(),
    new UpdateContentfulExtensionPlugin({
      descriptor: path.join(__dirname, "extension.json"),
    }),
  ],
};
```

_index-dev.html_

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

_index.html_

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link inline inline-asset="main.css" inline-asset-delete />
  </head>
  <body>
    <div id="root"></div>
    <script inline inline-asset="main.js" inline-asset-delete></script>
  </body>
</html>
```

</details>

## Configuration API

**dev**: `boolean` = `process.env.WEBPACK_DEV_SERVER`

Whether to serve the extension from `localhost` or to upload ut. Defaults to the value of the `WEBPACK_DEV_SERVER` environment variable set by `webpack-dev-server`.

---

**descriptor**: `string`

Required. An absolute path to `extension.json`.

---

**fileName**: `string` = `"index.html"`

The name of the output file. Only required if your output file name is different from `index.html`.

---

**https**: `boolean` = `false`

If set to `true`, will tell Contentful to load the local extension from `https://localhost`

---

**port**: `number` = `webpackOptions.devServer.port`

What port the local extension is available at. Defaults to the port used by `webpack-dev-server` if configured.

It seems like the `devServer` webpack option is required for the config object to contain the default port, but an empty object is enough (`devServer: {}`).

---
_Source: https://npm.io/package/update-contentful-extension-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._