Entry chunks for .css files also creating .js files

[AnalogMemory]

My config file is working fine. But I've just noticed it's generating extraneous files based on the entry points. The entry for login generates the correct .css file from the .scss file but also creates a login.js file (it essentially has an empty function inside it). Is there a way to prevent this?

Currently using Webpack 2.6.0 and Extract Text Webpack Plugin 2.1.0

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, './.'),
  entry: {
    'main': [
      './js/main.js',
      './sass/main.scss',
    ],
    'login': './sass/admin/login.scss',
  },
  output: {
    path: path.resolve(__dirname, '../public'),
    publicPath: '/public/',
    filename: 'scripts/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/(node_modules|bower_components)/],
        use: [
          {
            loader: 'buble-loader',
            options: {
              objectAssign: 'Object.assign'
            },
          }
        ],
      },
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          use: [
            'css-loader',
            'sass-loader'
          ]
        })
      },
    ]
  },
  resolve: {
    modules: [
      "node_modules"
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'styles/[name].css',
      allChunks: true,
    }),
  ]
}

Here's what the extraneous login.js file contains:

!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};
return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};
n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};
return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/public/",n(n.s=5)}({5:function(e,n){}});

[michael-ciniawsky]

Sadly not with the current implementation, webpack 'natively' only understands JS and will emit a JS file with the code that gets added to the chunk by webpack into a separate .js file, I don't recommend to use any non JS file as an entry point in general, require/import in a JS entry is the better solution for non-JS resources atm. This may change in the intermediate future https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7

[hackingbeauty]

This issue is unfortunate.

[sscaff1]

@AnalogMemory @hackingbeauty I was able to get around this problem by using https://github.com/AnujRNair/webpack-extraneous-file-cleanup-plugin. I have a pull request in to clean up files specified only in particular files.

[hackingbeauty]

To add to the conversation, I was able to successfully remove the redundant JS via these 2 Webpack plugins:

...
new HtmlWebpackPlugin({
  excludeAssets: [/index.js/]
}),
new HtmlWebpackExcludeAssetsPlugin()
...

Check out the HtmlWebpackExcludeAssetsPlugin here:
https://www.npmjs.com/package/html-webpack-exclude-assets-plugin

[hyzhak]

@hackingbeauty sadly this solution doesn't remove unwanted js files, just exclude them from generated html. And won't work without HtmlWebpackPlugin plugin.

[hyzhak]

@sscaff1 why do we want to stick to a size of a file? Why don't use a filename instead?

[sscaff1]

@hyzhak the size seemed weird to me too. I submitted a PR (which was accepted and published) to eliminate files from a particular path. That satisfied my use case. For example if I had webpack outputting the following directories
project/css/ <~~~ The plugin helps me eliminate all js files from this directory.
project/js/

[georgetroughton]

If using the HtmlWebpackPlugin and HtmlWebpackExcludeAssetsPlugin solution above you can use rimraf as part of your build script to delete the files you don't want, something like -

"build": "NODE_ENV=production yarn run clean && webpack -p && rimraf dist/js/style.*.js"

Works for me...