如何告诉 Webpack 什么都不输出？答案

【问题标题】：How to tell Webpack to output nothing?如何告诉 Webpack 什么都不输出？
【发布时间】：2019-02-27 20:46:17
【问题描述】：

我正在尝试配置svg-sprite-loader/plugin。我已经为该任务制作了独立的 Webpack 配置文件。它查看指定目录并从中获取每个.svg。结果是icons.svg sprite 文件。但是 Webpack 也会为每个入口文件创建.js。是否可以排除或...删除...或任何...这些文件？换句话说，我只需要插件输出，别无其他。

提前谢谢你！

附：也许我应该在任务完成后以编程方式删除这些文件？

webpack.prod.conf.js

const merge = require('webpack-merge');

const webpackBaseConfig = require('./webpack.base.conf');
const webpackSpritesConfig = require('./webpack.sprites.conf');

module.exports = [
  webpackSpritesConfig,
  merge(webpackBaseConfig, {
    ...
  })
];

webpack.sprites.conf.js

const fs = require('fs');
const path = require('path');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

function getSprites() {
  let sprites = {};

  fs.readdirSync(path.resolve(__dirname, '../src/sprites'))
    .filter(file => file.match(/\.svg/))
    .forEach(file => {
      let filename = file.split('.');

      filename.pop();

      sprites[filename] = path.resolve(__dirname, '../src/sprites/' + file);
    });

  return sprites;
}

module.exports = {
  entry: getSprites(),
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: 'img/icons.svg'
        }
      }
    ]
  },
  plugins: [new SpriteLoaderPlugin()]
};

【问题讨论】：

svg-sprite-loader 本身导出 js
Axnyff，可以告诉它不要那样做吗？
不，webpack 总会输出一些东西。

标签： javascript webpack svg-sprite

【解决方案1】：

我的解决方法是在 Webpack done hook 之后删除那些生成的文件：

webpack.sprites.conf.js

const fs = require('fs');
const path = require('path');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

const EventHooksPlugin = require('event-hooks-webpack-plugin');
const { CallbackTask } = require('event-hooks-webpack-plugin/lib/tasks');

let files = [];

function getSprites() {
  let sprites = {};

  fs.readdirSync(path.resolve(__dirname, '../src/sprites'))
    .filter(file => file.match(/\.svg/))
    .forEach(file => {
      let filename = file.split('.');

      filename.pop();

      files.push(path.resolve(__dirname, '../dist/' + filename + '.js'));
      sprites[filename] = path.resolve(__dirname, '../src/sprites/' + file);
    });

  return sprites;
}

module.exports = {
  entry: getSprites(),
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: 'img/icons.svg'
        }
      }
    ]
  },
  plugins: [
    new SpriteLoaderPlugin(),
    new EventHooksPlugin({
      done: new CallbackTask((compiler, callback) => {
        files.forEach(file => {
          fs.unlinkSync(file);
        });

        callback();
      })
    })
  ]
};

【讨论】：