webpack plugin that adds other plugins

I'm trying to create a plugin that acts as a plugin wrapper, loading configuration, files, etc. and adding more plugins to the current webpack compilation process.

In the apply function I create the plugins and then apply them against the original compiler, something like this:

apply(compiler) {   const plugins = [     new HtmlWebpackPlugin(options1),     new HtmlWebpackPlugin(options2),     ...   ];    plugins.forEach((plugin) => {     plugin.apply(compiler);   }); }); 

My plugin doesn't add any hook to the webpack compiler but let other plugins with add them. It works nice when the container project uses webpack 4... but I found an error when working with different webpack versions.

One of the injected plugins is the html-webpack-plugin, which is a dependency of my plugin:

package.json

"dependencies": {   "copy-webpack-plugin": "^4.5.1",   "html-webpack-plugin": "^3.2.0",   "webpack-bundle-analyzer": "^2.11.3" } 

So as you can imagine, I inject instances of those 3 plugins.

The problem comes when the project using my plugin uses webpack 3, because at some point, inside html-webpack-plugin requires NodeTemplatePlugin which is under html-webpack-plugin/node_modules/webpack. So as far as I understand, html-webpack-plugin has its own webpack which is webpack 4. Since the original passed compiler comes from webpack 3, and the one expected in NodeTemplatePlugin is webpack 4 I get an error when the latest tries to access compiler.hooks.thisCompilation because it doesn't exist in the compiler from webpack 3.

Funny thing is, in my package json webpack is defined as a peerDependency (same as in html-webpack-plugin) so it shouldn't be installed under the node_modules of my plugin.

"peerDependencies": {   "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0" }, 

Any idea of why is this happening, or an alternative on how to inject plugins from another plugin?

If you need more context/code, you can check it here:
https://github.com/danikaze/generate-examples-index-webpack-plugin/blob/dev/src/ExamplesGenerator.js#L61

0 Answers

Read More

Webpack html plugin is not generating html

I am using webpack html plugin to generate the html page from the graphiql.ejs but it is not generating html page when I am running npm start

webpack.config.js

var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = {   plugins: [     new HtmlWebpackPlugin({       filename: "public/graphql/index.html", // Write the file to <public-path>/graphql/index.html       inject: false, // Do not inject any of your project assets into the template       GRAPHQL_VERSION: packageJSON.dependencies.graphql.replace(/[^0-9.]/g, ""), // Get the graphql version from my package.json       template: "graphiql.ejs" // path to template     })   ] }; 

I want to generate the index.html inside the /public/graphql directory. Does anyone know what I am doing wrong ? Is there any other command to run webpack ?

3 Answers

Answers 1

webpack.config.js

    const path = require('path');     const HtmlWebpackPlugin = require("html-webpack-plugin");     const packageJSON=require("./package.json");     module.exports = {         entry: './src/app.js',         output: {             path: path.resolve(__dirname, 'public'),             filename:"build.js"         },         plugins: [             new HtmlWebpackPlugin({                 filename: "graphql/index.html", // Write the file to <public-path>/graphql/index.html                 inject: false, // Do not inject any of your project assets into the template                 GRAPHQL_VERSION: packageJSON.dependencies.graphql.replace(/[^0-9.]/g, ""), // Get the graphql version from my package.json                 template: "graphiql.ejs" // path to template             })         ]           } 

run webpack -p to generate the html

webpack -p

Answers 2

Here is the one that worked for me. If still you face any issue let me know. I will share the code with github.

const path = require('path'); const HtmlWebpackPlugin = require("html-webpack-plugin"); const packageJson = require("./package.json");  const GRAPHQL_VERSION = packageJson.dependencies.graphql.replace(/[^0-9.]/g, '');  module.exports = {   entry: 'index.js',   output: {     path: path.resolve(__dirname, 'public'),     filename: 'index.bundle.js'   },   plugins: [     new HtmlWebpackPlugin({        filename: 'index.html',       inject: false,       GRAPHQL_VERSION: GRAPHQL_VERSION,       template: 'graphiql.ejs'     })   ] } 

Answers 3

You need ensure that you actually run webpack when you do npm start.

One way of doing that is to add a prestart script to package.json. This will automatically be executed before the start script when you do npm start (more details):

{     "version": "1.0.0,     "name": "my-app",     "scripts": {         "prestart": "webpack",         "start": "nodemon server.js --exec babel-node --presets es2015,stage-2"     } } 

Read More

Cache busting in a Google Chrome Web Application

We are currently using Webpack with the HtmlWebpackPlugin to generate our javascript builds for our webpage.

new HtmlPlugin({     template: 'www/index-template.html',                //source path - relative to project root     filename: 'index.html',                             //output path - relative to outpath above     hash: true,     cache: true                                         //only emit new bundle if changed }), 

This causes a hash to be added to the query string of the bundled javascript file.

<script type="text/javascript" src="/build/vendor.min.js?4aacccd01b71c61e598c"></script><script type="text/javascript" src="/build/client.min.js?4aacccd01b71c61e598c"></script> 

When using any standard desktop or mobile browser, new builds are cache busted properly and the new version of the site is loaded without any effort from the user. However, we also have a chrome web app implementation where we call:

chrome.exe --app=http://localhost:65000 --disable-extensions

In this application, for some reason the hash on the end of the javascript build doesn't bust the cache. We have to manually right click somewhere on the page, then click reload (or press F5). For some reason the cache isn't busted in the web application.

I was thinking that possibly it is caching the index.html file maybe? That may cause the app to never receive the updated hash on the build. I'm not sure how to solve that issue though if that is the case.

I have also noticed that if our localhost server is down, the page still loads as if the server were running. This indicates to me some kind of offline cache. I checked the manifest.json parameters and can't find anything to force a reload.

I have also tried these chrome command line switches which did not help either: --disk-cache-size=0, --aggressive-cache-discard, --disable-offline-auto-reload.

Another caveat is that we need to retain the localStorage data and their cookies. In a standard browser window, or any browser for that matter it works just fine, but not when it is inside a Chrome web app.

2 Answers

Answers 1

Are you talking "Progressive Web App" with service workers? If so then the html file can (and should) be cached on first download. You need to have some sort of aggressive update process on the client to ensure new files are loaded properly.

Perhaps having an api call that checks some sort of dirty flag on the server could work, and if it comes back true, it should reload the template files. Or something more complex where it gets an array of dirty files from the server so it knows which ones to reload instead of loading everything. Just some ideas.

Answers 2

As your page works without the server running at localhost, I suspect that your app is offline first. This is done exactly through service workers(as pointed out by @Chad H) which are officially supported by Chrome and are experimental in other browsers. So, expect different behavior in other browsers. To bust the cache,

In Production

For a permanent solution, you to find and modify the service worker (SW) code. Deletion of old caches happens only in activate event of SW.

You can also read more about Service worker and ask a question with the updated SW code. Also, check out this resolved issue that faced a problem similar to yours.

For dev setup

You can use the Disable Cache option under Network tab in Chrome DevTools (works only when DevTools is open) or use a more robust chrome extension called Cache Killer.

Read More

Webpack html-webpack-plugin load favicons in template

I'm using Webpack with html-webpack-plugin and their provided template. I want to add a list of favicons in the header:

<link rel="apple-touch-icon" sizes="57x57" href="<%= htmlWebpackPlugin.extraFiles.apple-touch-icon-57x57 %>"> <link rel="apple-touch-icon" sizes="60x60" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav60%>"> <link rel="apple-touch-icon" sizes="72x72" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav72%>"> <link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="favicons/manifest.json"> <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#e53935"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="favicon/mstile-144x144.png"> <meta name="theme-color" content="#e53935"> 

How can I include all the favicons in my webpack build, with or without html-webpack-plugin?

I tried adding them as extraFiles like the docs say, but they don't end up in my build folder.

Note: The first 3 was me trying to something that didn't work.

1 Answers

Answers 1

After numerous trials...still didn't manage to make it work with html-webpack-plugin, I did find a new library that helps with everything relating to titles, descriptions, keywords,...and almost any kind of header called react-helmet

You can find it here: https://github.com/nfl/react-helmet

Basically you add something like this in your main component

<Helmet     link={[         {"rel": "apple-touch-icon", "href": require('apple-touch-icon-57x57.png'), "sizes": "57x57}      ]}  /> 

Hope this helps others.

Read More