1

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

先感谢您！

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

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

1 回答 1

0

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

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();
      })
    })
  ]
};
于 2018-09-24T12:55:00.470 回答