Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent webpack to create js file for css?

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?

like image 675
Trupti Avatar asked Feb 26 '18 07:02

Trupti


People also ask

How does webpack load CSS?

To be able to use CSS in your webpack app, you need to set up a new loader. Out-of-the-box, webpack only understands Javascript and JSON. With a loader, you can translate another type of file to a format that webpack understands and can work with. There are many webpack loaders and each loader has a specific purpose.

How do I include a JavaScript file in webpack?

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.

What does css-loader do?

CSS Loader being a front-end component is defined as an npm Module that collects all the CSS files referenced in the working application to help webpack and consolidate into a string. This compiles an application of a particular resource as a JavaScript module (CSS to JS file).


1 Answers

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.

like image 178
MXT Avatar answered Oct 18 '22 15:10

MXT