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

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 2

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 3

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 4

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 5

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