How to combine webpack-license-plugin with create-react-app?

Question

For my React-website, I need to document all the packages I am using. For this, I want to use webpack-license-plugin (https://www.npmjs.com/package/webpack-license-plugin) However, I recently switched to using "create-react-app" which means there is no config-file I can directly modify. I tried to follow this answer (create react app Configuration file after build app) which tells me to create a config-file, use the plugin there and load it in my index.html-file.

I would have expected when running the build somehow the inside config-file by me specified output-file would appear inside the build-folder, BUT there is nothing.

I did not find any other guidance, other than this question (Customize webpack plugins using create-react-app). However, I would like to avoid making use of new tools, if possible. Generally, I just wonder about the simplest way how to achieve what I set out to do. Thanks for any help!

Here is the content of the extra config-file I added to my public folder (beside the index.html):

const LicensePlugin = require("webpack-license-plugin")

module.exports = {
  plugins: [
    // there might be other plugins here
    new LicensePlugin({ outputFilename: "thirdPartyNotice.json" })
  ]
}

And here is the content of my index.html:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Cardo&display=swap" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script src="%PUBLIC_URL%/config.js" type="text/javascript"></script>
    <div id="root"></div>
  </body>
</html>```

How to combine webpack-license-plugin with create-react-app?

0 Answers0