From 44a473db5de8d1db1cfa8befbbadc62b1ca2f80d Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Thu, 1 Aug 2019 23:53:23 +0700 Subject: [PATCH] docs(README): Add suggested webpack usage (#194) --- README.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/README.md b/README.md index 1dae737..d52c4e6 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Table of contents * [Installation](#installation) * [Basic Setup](#basic-setup) * [Basic Setup with module bundlers](#basic-setup-with-module-bundlers) + * [Usage with webpack without bundling](#usage-with-webpack-without-bundling) * [Using the Promise-based APIs](#using-the-promise-based-apis) * [Examples](#examples) * [Known Limitations and Incompatibilities](#known-limitations-and-incompatibilities) @@ -155,6 +156,38 @@ var browser = require("webextension-polyfill/dist/browser-polyfill.min"); ... ``` +### Usage with webpack without bundling + +The previous section explains how to bundle `webextension-polyfill` in each script. An alternative method is to include a single copy of the library in your extension, and load the library as shown in [Basic Setup](#basic-setup). You will need to install [copy-webpack-plugin](https://www.npmjs.com/package/copy-webpack-plugin): + +```sh +npm install --save-dev copy-webpack-plugin +``` + +**In `webpack.config.js`,** import the plugin and configure it this way. It will copy the minified file into your _output_ folder, wherever your other webpack files are generated. + +```js +const CopyWebpackPlugin = require('copy-webpack-plugin'); + +module.exports = { + /* Your regular webpack config, probably including something like this: + output: { + path: path.join(__dirname, 'distribution'), + filename: '[name].js' + }, + */ + plugins: [ + new CopyWebpackPlugin([ + { + from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js' + } + ]) + ] +} +``` + +And then include the file in each context, using the `manifest.json` just like in [Basic Setup](#basic-setup). + ## Using the Promise-based APIs The Promise-based APIs in the `browser` namespace work, for the most part,