Webpack bundle generates additional JS file along with CSS file

Question

Below is my webpack configuration

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        app: './src/index.js',
        style: './src/style.less',
        bootstrap: './node_modules/bootstrap/dist/css/bootstrap.min.css'        
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Test Application',
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: this.mode == "development" ? '[name].css' : '[name].[hash].css',
            chunkFilename: this.mode == "development" ? '[id].css' : '[id].[hash].css',
        })
],
output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist'),
},
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
              ],
        },
        {
            test: /\.less$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        }
    ]
}

};

It generates style.js along with style.css, I don't understand why it generates the style.js.

Also for bootstrap: './node_modules/bootstrap/dist/css/bootstrap.min.css'; it generates bootstrap.js instead of bootstrap.css. again, I don't understand this.

Note: I wanted an application should be loaded with css in the beginning itself, thus, the web page should not wait/render different css one after another. So I haven't used an import statement and gave css file path inside entry.

The application is working as expected, am I missing some concept or is there any fix in the code?

Jameel Moideen · Accepted Answer · 2018-10-12 16:00:59Z

2

Looks like a known issue in webpack. You can simply ignore the file generated and you don't need to refer the same on your page.

You can see the issue discussions here

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518

answered Oct 12, 2018 at 16:00

Jameel Moideen

8,01913 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Parth Patel Over a year ago

Thanks, I have gone through the thread. Hopefully, they will fix it in upcoming release :)

Collectives™ on Stack Overflow

Webpack bundle generates additional JS file along with CSS file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related