-
-
Notifications
You must be signed in to change notification settings - Fork 388
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Don't output empty JS files #151
Comments
@TomS- can you create minimum reproducible test repo? |
@evilebottnawi Yup, I'll set it up this evening |
https://github.com/TomS-/minicss Sorry for the delay |
@TomS- I'm not sure I understand your issue. Do you want to not output |
@tiendq I don't want Webpack to output a JS file for CSS. It seems strange to me for it to do that. At the moment I'm getting the CSS file and a JS file. I'm coming from Gulp so maybe it's just I don't understand Webpack. |
@TomS- I don't want it too :) |
+1 Mainly because it'll probably fix Va1/browser-sync-webpack-plugin#69 |
+1 |
Weppack is |
Same issue. I have a PHP application but I am managing assets with Webpack. With Webpack 4 & MiniCssExtractPlugin, generating CSS files is a pain at the moment. I need to directly load CSS file. Part of my config:
Files generated are: I don't need |
The cause of this is probably webpack/webpack#7300, which has been added to the Webpack 4.x milestone. |
This issue is biting me as well. Feel free to close this if this plugin can't offer an alternative. Btw, webpack/webpack#7300 has been retagged with Webpack 5.x, so we won't likely see a fix in webpack until then. |
We search way to fix it inside plugin |
Having same issue. I'm using webpack to compile both JS and SCSS and different entries (i.e. not requiring the css inside JS) and for each .css file generated I also get a .js file. |
My temporary solution is to use this plugin - https://github.com/medfreeman/ignore-assets-webpack-plugin |
I had to make my own plugin:
It's very specific for my use case and has things hardcoded and I even have just put it directly in the webpack.config.js file (so not published on npm) but maybe it can be integrated somehow in some version directly into mini-css-extract-plugin? And made configurable with some additional options. |
To give you another "solution", I'm currently just excluding the useless .js on the bundled index.html:
|
@riccardomessineo correct me if I'm wrong, but it still generates those files, but don't add them to the html file, right? |
@Igloczek you're perfectly right. |
I faced the same issue of having a style only entry (css/sass/less) generating an extra .js file, and ended up creating a webpack plugin to remove the js file from the compilation. I published it on npm as webpack-fix-style-only-entries. You can find the source code on https://github.com/fqborges/webpack-fix-style-only-entries. :-) shamelessly promoting my package :-) |
Use |
@michael-ciniawsky bug, still open before it was fixed in webpack |
@fqborges I'm trying to use your plugin, but I'm running into a problem where the For example, if I add a Do you know why this might be happening? The webpack docs on what gets passed for the |
@riccardomessineo |
Sorry to hear that... |
@danechitoaie thx for the tip! I've just created a more abstract class to do this: class Without {
constructor(patterns) {
this.patterns = patterns;
}
apply(compiler) {
compiler.hooks.emit.tapAsync("MiniCssExtractPluginCleanup", (compilation, callback) => {
Object.keys(compilation.assets)
.filter(asset => {
let match = false,
i = this.patterns.length
;
while (i--) {
if (this.patterns[i].test(asset)) {
match = true;
}
}
return match;
}).forEach(asset => {
delete compilation.assets[asset];
});
callback();
});
}
}
module.exports = {
mode: process.env.NODE_ENV || 'development',
resolve: {
extensions: ['.scss', '.css']
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]',
}),
new Without([/\.css\.js(\.map)?$/]), // just give a list with regex patterns that should be excluded
],
}; |
I forked disable-output-webpack-plugin to allow me to conditionally remove the outputs (https://github.com/Jorenm/disable-output-webpack-plugin/tree/options) I use it with this config, which works like a charm:
|
very well ! Thanks ! |
I use Symfony Encore and have to fix the entrypoints too. But this should also work with a normal Webpack. My approach to this problem:
and i use it with:
|
Fixed for |
Another way to prevent this:
|
Hello erveryone. As soon as i put the line 'excludeAssets: [/app.js/, /custom.js/]' in the webpack config above in comments, everything works (ok, an console error that missing files are linked which, in this case, does indicate that it works) but i have the links to the files in the html. When i uncomment that line, the behaviour is as described above. Some help before reaching insanity would be highly appreciated. Thank you.
|
It will be solved for webpack@5 (near future), right now please use solutions above |
Thank you for the answer, i was in hope to not get this 'answer'. Here we have a thread discussing this very problem since 1 1/2 years, the tip to wait for v5 had already been given a year ago, but the discussion went on. I did use a solution from above, i tried all of them. |
It turned out that not importing the scss files in my index.js but setting them as entry points in the webpack config did the job. Everything else was fine. I never changed this throughout my efforts to get this to work. Of course i tried setting the scss files as entry points but not once did i think of removing them from my index.js. Other solutions here might also only work well if crafted like this, i don't know, but check if they do not. I know some folks say that setting (s)css as an entry point should not work at all, consider it bad practice. At this moment in time i couldn't care less as long as i do not encounter direct drawbacks from that in my project (but i am interested in what these might be). And, to be honest, i have no real need to get this going this way, i am new to webpack, this is my first 'live' test which began 6 days ago. This is how i start stuff, i try to accomplish something i have in mind. That also is the reason for why there's Foundation and Bootstrap in there, i was curious. Had to get into Foundation for a job and i wanted to transfer some of my Boostrap blocks to be styled by Foundation. To do this in one file in parallel seemed interesting and now it seems to work.
I said i tried all of the solutions in this thread. That's true. But the more i look through them now the more i see that i could have found out faster if i hadn't been only rearranging the webpack config over and over again. Some of the solution do suggest using entry points. You know what, this is confusing. It is. |
Close in favor #85 |
Just another idea, in case you know which directory you want to remove the useless JS file from and your webpack command is aliased as an npm run command then you can just issue a wildcard delete for anything that ends with a Example: In
then $ npm run build |
v5 is here and it has changed absolutely nothing. Seems it's being tracked at webpack/webpack#11671. |
I added the |
This doesn't work, at least not with WebPack 4. How does it work for you? |
If it helps anyone I used the plugin remove-files-webpack-plugin, just need to change new RemovePlugin({
/**
* After compilation permanently remove empty JS files created from CSS entries.
*/
after: {
test: [
{
folder: 'dist/public/css',
method: (absoluteItemPath) => {
return new RegExp(/\.js$/, 'm').test(absoluteItemPath);
},
}
]
}
}), |
Thank you very much for your help, I have tried several times to compile for separate js and css files and always had problems, but you helped a lot with your code. Good to you!!!!! |
I have seen people use the Extract plugin and name the file the same to prevent a useless .js file, however, naming the file the same in this instance gives the error:
Conflict: Multiple assets emit to the same filename main.js
I only want to take a CSS file and run it though autoprefix and minify, I don't need it to output a JS file.
The text was updated successfully, but these errors were encountered: