Browse Source

[doc] add examples; fix typos

mightyplow 6 years ago
parent
commit
da84f9ad3e
1 changed files with 53 additions and 4 deletions
  1. 53 4
      README.md

+ 53 - 4
README.md

@@ -1,5 +1,6 @@
 # inject-assets-webpack-plugin
 # 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.
 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
 ## 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. 
 be replaced if the target is also a webpack asset. 
 
 
 So for example if you want to replace the assets
 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 
 use the [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) to copy the service worker 
 to the target directory.  
 to the target directory.  
 
 
-### inside ServiceWorker
+### examples
+
+Let's assume, our service worker has the following content
+
 ````
 ````
+// serviceWorker.js
 const FILES_TO_CACHE = [
 const FILES_TO_CACHE = [
     '/',
     '/',
     '{{vendor}}',
     '{{vendor}}',
     '{{app}}'
     '{{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']
+    })
+]
+...
+````