javascript - 如何告诉 Webpack 什么都不输出?
问题描述
我正在尝试配置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()]
};
解决方案
我的解决方法是在 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();
})
})
]
};
推荐阅读
- node.js - Nightwatch JS - 如何通过 Firefox 无头运行测试
- webpack - 如何为模块子目录编写 webpack 外部
- data-structures - 使用哈希图平衡 BST?
- express - 我只想使用 expressjs 更新 cassandra 中的单个记录
- r - R:将所有日期移至一周
- node.js - #hyperledger #caliper #node
- mongodb - 如何在数组中找到被对象包围的特定元素?
- javascript - Chrome 会在保存时清除数据
- java - 关于在Java中使用继承时的构造函数初始化序列
- html - 断点未按预期工作