How to prevent Webpack from generating .js files?

Question

I am trying to use Webpack to iterate through a few scss files and create css files from them. The program is working and generates the files but it throws an Multiple assets emit to the same filename name.css error.

I believe this is because the MiniCssExtractPlugin is clashing with Webpack's output . Any thoughts how can I disable this? Or at least keep js files from being generated?

Current webpack.config.js:

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const setEntryPoints = (themes = {}) => {
  fs.readdirSync(path.join(__dirname, 'src')).forEach(file => {
    themes[file.slice(0, -5)] = path.join(__dirname, 'src', file)
  })
  return themes
}

const themes = setEntryPoints();

module.exports = {
  mode: "development",
  entry: themes,
  output: {
    filename: '[name].css',
    path: path.join(__dirname, 'dist')
  },
  module: {
  // Add loader
  rules: [{
      test: /\.(scss)$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader', 'sass-loader'
      ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    })
  ],
};

Answer 1

Do it like this. Might work properly

entry: {
  app: [
    path.resolve(__dirname, 'src/pug/app.pug'),
    path.resolve(__dirname, 'src/js/app.js'),
    path.resolve(__dirname, 'src/scss/app.scss')
  ]
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'js/[name].js'
},

And you do the same thing as with output.filename for the filename in the extract text plugins:

const extractHtml = new ExtractTextPlugin({
  filename: 'html/[name].html'
});

const extractScss = new ExtractTextPlugin({
  filename: 'css/[name].[contenthash].css',
  allChunks: true
});