|
@@ -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']
|
|
|
+ })
|
|
|
+]
|
|
|
+...
|
|
|
+````
|