Webpack - omit creation of LICENSE.txt files

Question

I'm using Webpack 5 and along with the bundle.js file a bundle.js.LICENSE.txt file is created which is not needed, because https://github.com/codepunkt/webpack-license-plugin is used for this task.

Is there any way to configure Webpack to omit the creation of LICENSE.txt files?

I've searched the webpack docs, SO and several issues on GitHub but didn't find anything helpful.

Answer 1

Add extractComments: false to webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');
.
.
.
module.exports = {
.
.
.
  optimization: {
    minimizer: [new TerserPlugin({
      extractComments: false,
    })],
  },
.
.
.
};

Answer 2

To properly remove both the license file and the comments inside the bundle use:

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      extractComments: false,
      terserOptions: {
        format: {
          comments: false,
        },
      },
    }),
  ],
},

https://github.com/webpack-contrib/terser-webpack-plugin#remove-comments

Answer 3

The webpack documentation only has this https://webpack.js.org/plugins/terser-webpack-plugin/#extractcomments

extractComments: false

This helped me get rid of LICENSE.txt

Answer 4

Yes, there is a way to configure Webpack to prevent the creation of the bundle.LICENSE.txt files in the build output.

Even though Webpack 5 includes the terser plugin out of the box, if you wish to customise it, you will still need to install it as a dependency, and then set the extractComments: false in the optimization settings, to stop the license text files being generated.

Step 1 - Install the terser plugin as a dev dependency

npm install terser-webpack-plugin --save-dev

Step 2 - Import the plugin into your webpack.config.js

const TerserPlugin = require("terser-webpack-plugin");

Step 3 - Add the optimization key and value

const TerserPlugin = require("terser-webpack-plugin");
// ...

module.exports = () => {
  return {
    entry: './src/index.tsx',
    module: {
      // ...
    },
    resolve: {
      // ...
    },
    output: {
      // ...
    },
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          extractComments: false,
        }),
      ],
    },
    plugins: [  
      // ...
    ],
  };
};

Once you have done this, the license text files should no longer appear in the build output directory.

You can take a look at these docs for more information: https://webpack.js.org/plugins/terser-webpack-plugin/#extractcomments

Answer 5

Just add a simple custom plugin, Delete LICENSE.txt after building the file.

install remove library npm i rimraf

const rimraf = require('rimraf');

plugins: [
  new (class {
    apply(compiler) {
      compiler.hooks.done.tap('Remove LICENSE', () => {
        console.log('Remove LICENSE.txt');
        rimraf.sync('./dist/*.LICENSE.txt');
      });
    }
  })(),
]

Answer 6

Add clean-webpack-plugin and add setting delete license files after build:

new CleanWebpackPlugin({
  cleanAfterEveryBuildPatterns: ['*.LICENSE.txt'],
})

Answer 7

For those who like me don't want to use the terser plugin, it's possible to remove all LICENSE.txt files, just adding to CleanWebpackPlugin options: cleanAfterEveryBuildPatterns: ['**/*.LICENSE.txt'], protectWebpackAssets: false. The downside of this approach is that .js vendor chunk files still have comments in the first line referring to the non-existent anymore licence license text files. To get rid also of these comments, I have created a customized plugin, which uses clean webpack plugin to remove txt files and also removes comments from vendor chunks:

const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

class CustomizedCleanWebpackPlugin {
  constructor({
    vendorJsFileRegex = /vendor.*\.js$/,
    licenseCommentRegex = /^\/\*\!.+\.LICENSE\.txt\s*\*\/\s*/,
    licenseTxtFilePattern = '**/*.LICENSE.txt',
    ...rest
  } = {}) {
    this.licenseCommentRegex = licenseCommentRegex;
    this.vendorJsFileRegex = vendorJsFileRegex;
    this.licenseTxtFilePattern = licenseTxtFilePattern;
    this.restCleanWebpackPlaginOptions = rest;
  }

  apply(compiler) {
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: [this.licenseTxtFilePattern],
      protectWebpackAssets: false,
      ...this.restCleanWebpackPlaginOptions
    }).apply(compiler);

    compiler.hooks.compilation.tap('CustomizedCleanWebpackPlugin', (compilation) => {
      compilation.hooks.afterProcessAssets.tap(
        'CustomizedCleanWebpackPlugin',
        (assets) => {
          Object.entries(assets).forEach(([fileName, source]) => {
            if (fileName.match(this.vendorJsFileRegex)) {
              compilation.updateAsset(
                fileName,
                new webpack.sources.RawSource(
                  source.source().replace(this.licenseCommentRegex, '')
                )
              );
            }
          });
        }
      );
    });
  }
}

module.exports = { CustomizedCleanWebpackPlugin };

Answer 8

I solved it this way:

import TerserPlugin from "terser-webpack-plugin";
optimization: {
minimizer: [
  (compiler: Compiler): void => {
    new TerserPlugin({
      terserOptions: {
        format: {
          comments: false
        }
      },
      extractComments: false
    }).apply(compiler);
  }
]}

See: https://github.com/MarkZhuVUW/ts-react-s3-circleci-employer-tracker/blob/feature/service-worker-notification/webpack.prod.config.ts