Question

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

提前谢谢！

P.S。也许我只是应该在任务完成后以编程方式删除那些文件？

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()]
};

Answer 1

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

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();
      })
    })
  ]
};

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

1 个答案: