Are entry points required for non JavaScript assets in web pack 4?

Question

The only way I have successfully had webpack generate a non JavaScript file is to include an entry for the primary asset. The problem is, webpack is generating a .js file based on this asset as well, which is unnecessary. Is this the correct way of working with non JavaScript assets in a webpack config?

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

const outputDir = 'build';
const extractStylus = new ExtractTextPlugin('../css/screen.css');

module.exports = {
  entry: {
    app: './src/js/index.js',
    print: './src/js/print.js',
    stylus: './src/stylus/screen.styl'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.styl$/,
        use: extractStylus.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'stylus-loader']
        })
      }
    ]
  },
  plugins: [extractStylus],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, `${outputDir}/js`)
  }
};

The specific line in question is part of the entry object:

stylus: './src/stylus/screen.styl'

Without that line, nothing is generated, but with that line, the expected .css as well as a stylus.bundle.js file are generated.

Answer 1

I think you misunderstand what the entry property does in a webpack config:

An entry point indicates which module webpack should use to begin building out its internal dependency graph. After entering the entry point, webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

Every dependency is then processed and outputted into files called bundles, which we'll discuss more in the next section.

[source, emphasis mine]

Without specifying an entry, webpack would not know where to look for your files; even if the dependency graph was not directional (which it is), you need to point webpack to at least one point of the graph.

The minor problem of having a JS file generated even though you are only processing assets is a consequence of how webpack generally is used – as an asset manager / compiler for some application logic written in JS. So, in theory, if you needed to use the compiled assets via NodeJS style requires, you'd use the generated stylus.bundle.js.