Delete or not create a file for each entry in webpack

Question

Hi I have a webpack config with these entry points:

  entry: {
    \'polyfills\': \'./src/polyfills.ts\',
    \'vendor\':    \'./src/vendor.ts\',
    \'app         


        

Answer 1

You can delete any files or folders after compilation by using remove-files-webpack-plugin.

Use this plugin like this:

plugins: [
  new RemovePlugin({
    after: {
      // expects what your output folder is `dist`.
      include: [
        './dist/css.bundle.js',
        './dist/css.map'
      ]
    }
  })
]

Note: i'm the creator of this plugin.

Answer 2

I put together a webpack plugin to remove extra files based on their output size, rather than basing it on their name - it's been a little more future proof for me as I continue to add extra entry points to my webpack config.

Install using npm or yarn

npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev

In your webpack.config.js file:

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');

module.exports = {
  ...
  plugins: [
    new ExtraneousFileCleanupPlugin({
      extensions: ['.js']
    })
  ]
}

You can see the full list of options on the Webpack Extraneous File Cleanup Plugin Github Page

Answer 3

I hacked together a SuppressEntryChunksPlugin (code below) that skips output of these useless bundles, if you tell it which bundles will be useless. Use it in your webpack.config.js like this:

var SuppressEntryChunksPlugin = require('./SuppressEntryChunksPlugin');
...
  entry: {
    'app': './src/app.ts',
    'css': './src/css/main.unique.scss',
    'index': './src/index.unique.html',
  },
  plugins: [
    // don't output the css.js and index.js bundles
    new SuppressEntryChunksPlugin(['css', 'index'])
  ]

Disclaimers: It works for me together with extract-loader and file-loader to extract the css/html from the entries and write the files into the output. I haven't tested it with ExtractTextPlugin. (It does work with webpack-dev-server. And it seems to successfully suppress external sourcemaps if you're using them. I've used it with both Webpack 1.13 and 2.2.1.)

// SuppressEntryChunksPlugin.js

function SuppressEntryChunksPlugin(options) {
  if (typeof options === 'string') {
    this.options = {skip: [options]};
  } else if (Array.isArray(options)) {
    this.options = {skip: options};
  } else {
    throw new Error("SuppressEntryChunksPlugin requires an array of entry names to strip");
  }
}

SuppressEntryChunksPlugin.prototype.apply = function(compiler) {
  var options = this.options;

  // just before webpack is about to emit the chunks,
  // strip out primary file assets (but not additional assets)
  // for entry chunks we've been asked to suppress
  compiler.plugin('emit', function(compilation, callback) {
    compilation.chunks.forEach(function(chunk) {
      if (options.skip.indexOf(chunk.name) >= 0) {
        chunk.files.forEach(function(file) {
          // delete only js files.
          if (file.match(/.*\.js$/)) {
            delete compilation.assets[file];
          }
        });
      }
    });
    callback();
  });
};

module.exports = SuppressEntryChunksPlugin;

Also, I'm whatever the opposite of "webpack expert" is, so there's almost certainly a better way to do this. (Perhaps someone would like to turn this into a real, published webpack plugin, with tests and whatnot?)