# Migrating from [wext-manifest](https://www.npmjs.com/package/wext-manifest) to [wext-manifest-loader](https://www.npmjs.com/package/wext-manifest-loader)

Instead of having manifest inside webpack configuration, the `manifest.json` could be handled by the loader.
The loader doesn't have to rely on `write-webpack-plugin` to emit the json file.

Webpack emits a `js` file for every `entry` in webpack configuration.

The loader is now in conjunction with **[wext-manifest-webpack-plugin](https://www.npmjs.com/package/wext-manifest-webpack-plugin)** to avoid compiling `js` for the manifest entry

<hr />

### Remove deprecated packages

```sh
npm uninstall wext-manifest write-webpack-plugin
```

### Add loader & plugin

```sh
yarn add wext-manifest-loader wext-manifest-webpack-plugin --dev
```

### Changes in Webpack Configuration

```
// - Deletions, + Additions

// ... other plugins
-   const wextManifest = require('wext-manifest');
-   const WriteWebpackPlugin = require('write-webpack-plugin');
+   const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');

-   const manifestInput = require('./src/manifest');
-   const manifest = wextManifest[targetBrowser](manifestInput);

module.exports = {
    entry: {
  +    manifest: './src/manifest.json',
        // ... other entries
    },

    module: {
        rules: [
  +         {
                type: 'javascript/auto', // prevent webpack handling json with its own loaders,
                test: /manifest\.json$/,
                use: {
                    loader: 'wext-manifest-loader',
                    options: {
                      usePackageJSONVersion: true, // set to false to not use package.json version for manifest
                    },
               },
            },
        ]
    }

    plugins: [
  -     new WriteWebpackPlugin([{ name: manifest.name, data: Buffer.from(manifest.content) }]),
  +     new WextManifestWebpackPlugin(),
        // ... other plugins
    ]
};
```

## The `manifest` file

Copy contents of `src/manifest/index.js` and transform it to `src/manifest.json` using an [online json transformer](https://jsonformatter.curiousconcept.com/)

**Input**
```js
// -- src/manifest/index.js

-   const pkg = require('../../package.json');

-   const manifestInput = {
    manifest_version: 2,
    name: 'Sample WebExtension',
    version: pkg.version,
    ...
}
```
**Output**
```js
// ++ src/manifest.json

{
    "manifest_version": 2,
    "name": 'Sample WebExtension',
    "version": "0.0.0",
    ...
}

```

And you are all set

<hr />

See the commit https://github.com/abhijithvijayan/web-extension-starter/commit/fadc746bc734f346f7df977d4273bafea6d04169 for the applied changes