How to prevent webpack to create js file for css?

Question

const path = require('path');

var webpack = require('webpack'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");
var nodeExternals = require('webpack-node-externals');
const CssEntryPlugin = require("css-entry-webpack-plugin");

module.exports = {
    entry: {
        index: './js/index.js',
        product_details: './js/index.js',
        signup: ['./js/signup.js','./js/index.js'],
        signup_style: ['./css/signup.css']
   },
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: "[name].min.js"
    },
    externals: [nodeExternals()],
    module: {
        rules: [
          {
            test: /\.js/,
            use: 'babel-loader',
            exclude: /node_modules/,
          },
          { 
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [{
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                        }
                    }]
            })
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin('../css/[name].css')
      ]
};

Above is my webpack.config.js file. It creates signup_style.min.js and signup_style.css files. I want only signup_style.css file to create and not signup_style.min.js.

How can we do that?

updpate `test: /\.js/,` to `test: /\.js$/,` – Ganesh Feb 26 '18 at 08:52 — Ganesh, Feb 26 '18 at 08:52

score 18 · Answer 1 · answered Feb 14 '19 at 18:13

18

You can use https://www.npmjs.com/package/webpack-fix-style-only-entries

This is a small plugin developed to solve the problem of having a style only entry (css/sass/less) generating an extra js file.

answered Feb 14 '19 at 18:13

MXT

289
2
6

1

Didn't work for me + introduced a bunch of deprecation warnings into the build output. – Chris Hayes Feb 08 '22 at 21:36
Works flawlessly for me. No deprecation warnings. – Frizzant Mar 24 '22 at 11:27
throwing deprecated warning for Webpack 5.75 – WBGUY001 Jan 17 '23 at 19:13

score 3 · Answer 2 · answered Feb 26 '18 at 08:22

3

By default webpack will generate that .min.js file. As in your configuration output all the entry files must generate its js files.

Note: extract-text-webpack-plugin will extract all css/sass located in your js entry files.

It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css).

All you need to do is to remove that file if you don't want it. I am using https://github.com/gregnb/filemanager-webpack-plugin/. Where you can define what files you will remove before or after webpack bundling.

answered Feb 26 '18 at 08:22

Dencio

518
3
12

1

More native way is to move request for your css file from entry point to index file (or any js file) with "require" keyword. Also it won't force you to remove js file for css. "Dummy" code for css will be included in your js bundle. – malonowa Feb 26 '18 at 13:42
1

I don't want to import css in any js file. I want separate CSS and JS files – Trupti Feb 27 '18 at 08:28
@Trupti But you mentioned you don't want .min.js files if so you just remove it using filemanager-webpack-plugin. – Dencio Feb 27 '18 at 08:31
1

For css file, it creates js and css file...instead of that I just want css file only and not js. – Trupti Feb 27 '18 at 08:41
When you define it to entry property webpack will generate a js file for it and ExtractTextPlugin will extract all css from that generated webpack js files. I would also like to clarify why do you need to generate css when you have `signup.css` already? – Dencio Feb 27 '18 at 08:52

How to prevent webpack to create js file for css?

2 Answers2

Linked