Parcourir la source

[doc] add examples; fix typos

mightyplow il y a 6 ans
Parent
commit
da84f9ad3e
1 fichiers modifiés avec 53 ajouts et 4 suppressions
  1. 53 4
      README.md

+ 53 - 4
README.md

@@ -1,5 +1,6 @@
 # inject-assets-webpack-plugin
-A plugin for webpack 4 which replaces assets in other assets. It was created to be used for caching in service workers.
+A plugin for webpack 4 which replaces assets with it's output filenames in other assets. It was created to be used 
+for caching in service workers.
 
 The plugin comes in handy when you add hashes to your assets during the webpack build.
 
@@ -11,7 +12,7 @@ npm i -D @mightyplow/inject-assets-webpack-plugin
 ````
 
 ## usage
-The assets you want to be replaced have to be wrapped by double curly braces. The assets can only
+The assets you want to be replaced have to be wrapped in double curly braces. The assets can only
 be replaced if the target is also a webpack asset. 
 
 So for example if you want to replace the assets
@@ -19,12 +20,60 @@ in a service worker, it has either be built by webpack or at least run through a
 use the [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) to copy the service worker 
 to the target directory.  
 
-### inside ServiceWorker
+### examples
+
+Let's assume, our service worker has the following content
+
 ````
+// serviceWorker.js
 const FILES_TO_CACHE = [
     '/',
     '{{vendor}}',
     '{{app}}'
 ]
 ````
-The asset names will be replaced by the output filesnames specified in the webpacks (or it's plugins) options.
+
+The asset names should be replaced by the output filename specified in the webpack config (or it's plugins).
+
+
+### copied with webpack-copy-plugin
+````
+// webpack.config.js
+const CopyPlugin = require('copy-webpack-plugin');
+const InjectAssetsPlugin = require('@mightyplow/inject-assets-webpack-plugin');
+
+...
+
+plugins: [
+    new CopyPlugin([
+        {
+            from: './src/serviceWorker.js',
+            to: './'
+        }
+    ]),
+    
+    new InjectAssetsPlugin({
+        targets: ['serviceWorker.js']
+    })
+]
+...
+````
+
+### build with webpack
+````
+// webpack.config.js
+const InjectAssetsPlugin = require('@mightyplow/inject-assets-webpack-plugin');
+
+...
+
+entry: {
+    serviceWorker: path.join(__dirname, 'src', 'serviceWorker.js')
+},
+
+plugins: [
+    new InjectAssetsPlugin({
+        targets: ['serviceWorker']
+    })
+]
+...
+````