anujrnair / webpack-extraneous-file-cleanup-plugin Goto Github PK
View Code? Open in Web Editor NEWA webpack plugin to remove unwanted files which may have been created and output due to multiple entry points
License: MIT License
A webpack plugin to remove unwanted files which may have been created and output due to multiple entry points
License: MIT License
When trying to install using yarn, I am getting the following error output:
error Couldn't find package "webpack-extraneous-file-cleanup-plugin" on the "npm" registry.
If I try the same thing using npm install, it seems to work?
Hi,
First of all, thanks for developing this plugin!
I think it would be nice to (have the option to) delete any created folders if their only purpose was to contain files that were deleted by this plugin. For example, in our webpack config, we define the entry points as an object:
entry: {
'font/default': './app/style/settings/font/default.scss',
'font/sans': './app/style/settings/font/sans.scss',
'font/serif': './app/style/settings/font/serif.scss',
// ...
},
This creates an output folder font
with the unwanted files default.js
, sans.js
, serif.js
. We’re only interested in the generated CSS files, and webpack-extraneous-file-cleanup-plugin
does a great job at removing the JavaScript. However, the empty font
folder remains (amongst others). Would the above suggestion fall within the scope of this project?
Thanks!
Would it be possible for me to use this to clear out an entire folder and its contents?
Long story short... I need to use sass files as entrypoints and these end up in my css/ as standalone/[name].css... However, this does mean webpack generates a standalone/[name].js in the root for everyone.
This is something I can't fix any other way and I was hoping I could use your plugin to remove the unneeded folder that is generated.
Not working with webpack 4
TypeError: Cannot read property 'files' of undefined
at Stats.toJson (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Stats.js:368:31)
at Stats.toString (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Stats.js:627:20)
at compilerCallback (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack-cli\bin\webpack.js:484:32)
at hooks.done.callAsync.err (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Compiler.js:185:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\tapable\lib\Hook.js:35:21)
at emitRecords.err (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Compiler.js:183:22)
at Compiler.emitRecords (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Compiler.js:295:39)
at emitAssets.err (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Compiler.js:177:10)
at hooks.afterEmit.callAsync.err (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Compiler.js:281:14)
at _err1 (eval at create (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:25:1)
at callback (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\copy-webpack-plugin\dist\index.js:126:17)
at afterEmit (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\copy-webpack-plugin\dist\index.js:220:13)
at _err0 (eval at create (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
at compiler.plugin (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack-extraneous-file-cleanup-plugin\lib\plugin.js:119:5)
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\tapable\lib\Hook.js:35:21)
at asyncLib.forEach.err (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\webpack\lib\Compiler.js:278:27)
at done (D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\neo-async\async.js:2809:11)
at D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\neo-async\async.js:2760:7
at D:\Harrix\GitHub\Harrix-HTML-Template\node_modules\graceful-fs\graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:153:20)
Hi :)
First of all is this problem still present with webpack 2? If so, this plugin is not removing my js
file which is created from a .scss
entry point. :)
Using webpack 4.8.1
I tried to use your plugin but get the following error:
SyntaxError: Unexpected token in JSON at position 0 at JSON.parse (<anonymous>) at ExtraneousFileCleanupPlugin.afterEmit
const webpack = require('webpack');
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const SuppressEntryChunksPlugin = require('./assets/scripts/SuppressEntryChunksPlugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
var paths = {
// Source Directory Paths
nodeModules: './node_modules/',
scripts: 'Scripts/',
styles: 'Styles/',
tests: 'Tests/',
// Destination Directory Paths
wwwroot: './wwwroot/',
css: './css/',
fonts: './fonts/',
img: './img/',
js: './js/',
themes: './themes/'
};
module.exports = [
{
mode: 'production',
entry: {
'site': ['./assets/styles/scss/main.scss', './assets/styles/toastr.min.css'],
'js/jquery-validate-bootstrap.min.js': ['./assets/scripts/jquery-validate-bootstrap.js'],
'kendo-custom': ['./assets/styles/scss/components/_kendo.scss']
},
output: {
filename: '[name]',
path: path.resolve(__dirname, paths.wwwroot),
// export itself to a global var
libraryTarget: "var",
// name of the global var: "Foo"
library: "MyLip"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: [/node_modules/],
loader: 'babel-loader',
options: {
presets: [
['es2015', { modules: false }]
]
}
},
{
test: /\.(sass|scss)$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
exclude: /node_modules/,
loader: 'url-loader?limit=1024&name=' + paths.fonts + '/[name]/[name].[ext]'
},
//{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: "file" },
//{ test: /\.(woff|woff2)$/, use: "url?prefix=font/&limit=5000" },
//{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: "url?limit=10000&mimetype=application/octet-stream" },
//{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: "url?limit=10000&mimetype=image/svg+xml" },
//{ test: /\.png$/, use: "url-loader?limit=100000" },
//{ test: /\.jpg$/, loader: "file-loader" }
]
},
externals: {
jquery: "jQuery"
},
optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
exclude: [/\.min\.js$/gi],
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true,
output: {
comments: false
},
warnings: false
},
sourceMap: true
})
,
new OptimizeCssAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true }, safe: true }
})
]
},
plugins: [
new CleanWebpackPlugin(
['./wwwroot/js', './wwwroot/css'], {
verbose: true,
dry: false,
exclude: ['shared.js']
}),
new MiniCssExtractPlugin({
filename: paths.css + '[name].min.css'
}),
new ExtraneousFileCleanupPlugin({
extensions: ['.js']
})
]
}
Please use wrap (try catch) for:
fs.unlinkSync(outputPath + '/' + assetKey) // unlink the asset
fs.unlinkSync(outputPath + '/' + assetKey + '.map') // unlink the map file
delete compilation.assets[assetKey] // remove from webpack output
delete compilation.assets[assetKey + '.map'] // remove from webpack output
Because when I build it I get an error that says that it is not possible to delete the file .map and I do not have it.
So the issue is that manifest entries are not deleted. I looked into the code and it looks like this is section responsible for removing manifest keys.
webpack-extraneous-file-cleanup-plugin/lib/plugin.js
Lines 101 to 107 in 26c82c8
Example manifest file
{
'entry.name': 'location/where/bundle/is.stored'
'entry.name.unwanted': 'location/where/bundle/is.stored'
}
assetKey
is removed entry for example entry.name.unwanted
manifestKey
is key from manifest for example entry.name
or entry.name.unwanted
manifestJson[manifestKey]
is value from manifest file location/where/bundle/is.stored
It means that this condition will never be true
if (manifestJson.hasOwnProperty('entry.name.unwanted') && 'location/where/bundle/is.stored' === 'entry.name.unwanted') {
I think it should be if (manifestJson.hasOwnProperty(manifestKey) && manifestJson[manifestKey] === (outputPath + assetKey))
or if (manifestJson.hasOwnProperty(manifestKey) && manifestKey === assetKey)
plugins: [
//new ExtraneousFileCleanupPlugin(),
new HtmlWebPackPlugin(),
],
results in:
Asset Size Chunks Chunk Names
calculator.js 1.87 MiB calculator [emitted] calculator
index.html 194 bytes [emitted]
But the:
plugins: [
new ExtraneousFileCleanupPlugin(),
new HtmlWebPackPlugin(),
],
results in:
Asset Size Chunks Chunk Names
calculator.js 1.87 MiB calculator [emitted] calculator
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.