webpack generating unnecessary output file

Question

I'm using multiple entry points (one to generate the bundled js file (main.js) and the other to generate the css file (style.css). My webpack.config.js file is generating both of those files but also a style.js file. How do I make it not generate the style.js file?

webpack.config.js:

'use strict';

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',

  entry: {
    main: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, './app/main.js')],

    style: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, './app/main.css')]},

  // any way to indicate that only the 1st entry point should be output to a file?
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        "presets": ["react", ["es2015", { "modules": false }], "stage-0", "react-hmre"]
      }
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
    }]
  }
};

The ExtractTextPlugin uses the style entry point to generate the css file, I don't want that entry point used in the bundle output. Is there any way to only have the main (1st) entry point used for the output? Or should I change my approach to generate the style.css file completely?

Answer 1

Quick fix: remove the second .css entry. You only need the .js entry.

entry: {
    main: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, './app/main.js')
    ],

    // Remove this entry!
    // style: [
    //   'webpack-hot-middleware/client?reload=true',
    //   path.join(__dirname, './app/main.css')
    // ]
}

You need to import or require all the used .css files (your main.css) somewhere in at least one of your .js files like this (I use typescript):

import "font-awesome/css/font-awesome.css";

---

Why?

The ExtractTextPlugin uses the style entry point to generate the css file ...

No, it doesn't!

The way Webpack works is that:

1. it generates the dependency graph by looking at the import and require sections in all of your javascript files starting from provided entries.

   

2. With each file in the dependency graph Webpack applies loaders base on the the test property of all loader objects. This is where the ExtractTextPlugin loader comes in. It will take care of all the .css files in the graph.

3. Finally, it applies all the specified plugins. Again, the ExtractTextPlugin plugin will come in to finish the work that ExtractTextPlugin loader has started.