Удалить или не создавать файл для каждой записи в веб-пакете

Question

Привет у меня есть конфиг webpack с этими точками входа:

  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor':    './src/vendor.ts',
    'app':       './src/app.ts',
    'css': './src/css/main.unique.scss',
    'index': './src/index.unique.html',
  },

Мой веб-пакет создает [name].bundle.js и [name].map для каждой записи.
Это имеет смысл для первых 3 записей javascript, но записи CSS и INDEX предназначены только для обработки моего основного файла CSS и моего основного файла html, которые позже обрабатываются ExtractTextPlugin

Так что после сборки я застрял с каким-то мусором, как css.bundle.js а также css.map который содержит только:

webpackJsonp([1],[
/* 0 */
/***/ function(module, exports) {

    // removed by extract-text-webpack-plugin

/***/ }
]);
//# sourceMappingURL=css.map

Как я могу сказать webpack НЕ создавать файлы для некоторых записей? (например, css/index)
Или в качестве альтернативы удалить эти бесполезные файлы после компиляции?

заранее спасибо

Answer 1

Я собрал вместе SuppressEntryChunksPlugin (код ниже), который пропускает вывод этих бесполезных пакетов, если вы скажете ему, какие пакеты будут бесполезны. Используйте его в вашем webpack.config.js следующим образом:

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'])
  ]

Отказ от ответственности: у меня это работает вместе с extract-loader и file-loader, чтобы извлечь css/html из записей и записать файлы в вывод. Я не проверял это с ExtractTextPlugin. (Он работает с webpack-dev-server. И, похоже, он успешно подавляет внешние исходные карты, если вы их используете. Я использовал его как с Webpack 1.13, так и с 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;

Кроме того, я являюсь противоположностью "эксперту по веб-пакетам", так что почти наверняка есть лучший способ сделать это. (Возможно, кто-то хотел бы превратить это в настоящий опубликованный плагин для веб-пакетов, с тестами и еще чем-нибудь?)

Answer 2

Я собрал плагин веб-пакета для удаления дополнительных файлов в зависимости от их размера вывода, а не на основании их имени - для меня это было чуть более перспективным, поскольку я продолжаю добавлять дополнительные точки входа в конфигурацию веб-пакета.

Установить с помощью npm или же yarn

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

В вашем webpack.config.js файл:

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

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

Вы можете увидеть полный список опций на странице Github плагина для очистки посторонних файлов Webpack.

Answer 3

Вы можете удалить любые файлы или папки после компиляции с помощью https://github.com/Amaimersion/remove-files-webpack-plugin.

Используйте этот плагин так:

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

Примечание: я создатель этого плагина.