Entrypoint undefined = extract-text-webpack-plugin-output-filename in webpack 4?

Question

I extracted css using extract-text-webpack-plugin in webpack 4. The CSS is exctacted but when i run npm run build , the css is extracted but i get a message on screen saying

Entrypoint undefined = extract-text-webpack-plugin-output-filename.

The Entire Stack Trace is below:

$ npm run build

> [email protected] build /media/azeem/A036C96E36C945CE/DevlopersConsole/Projects/comp
> webpack

Hash: 81ca52e4a0297e3e830f
Version: webpack 4.7.0
Time: 52303ms
Built at: 2018-05-06 23:13:09
       Asset      Size  Chunks             Chunk Names
   bundle.js  4.06 KiB    main  [emitted]  main
css/main.css  58 bytes    main  [emitted]  main
Entrypoint main = bundle.js css/main.css
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/main.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main.scss 197 bytes [built]
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/one.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/one.scss 183 bytes [built]
[./src/app.js] 162 bytes {main} [built]
[./src/main.scss] 41 bytes [built]
[./src/one.scss] 41 bytes [built]
[0] multi ./src/app.js ./src/main.scss 40 bytes {main} [built]
    + 3 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/main.scss:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/main.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main.scss 197 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!src/one.scss:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/one.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/one.scss 183 bytes {0} [built]

Package.json file is:

{
  "name": "comp",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "precss": "^3.1.2",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "webpack": "^4.7.0",
    "webpack-cli": "^2.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js

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

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin({
    filename: 'css/main.css',

});

/*
 * We've enabled UglifyJSPlugin for you! This minifies your app
 * in order to load faster and run less javascript.
 *
 * https://github.com/webpack-contrib/uglifyjs-webpack-plugin
 *
 */

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



 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

/*
 * SplitChunksPlugin is enabled by default and replaced
 * deprecated CommonsChunkPlugin. It automatically identifies modules which
 * should be splitted of chunk by heuristics using module duplication count and
 * module category (i. e. node_modules). And splits the chunks…
 *
 * It is safe to remove "splitChunks" from the generated configuration
 * and was added as an educational example.
 *
 * https://webpack.js.org/plugins/split-chunks-plugin/
 *
 */

module.exports = {
    entry : [ './src/app.js', './src/main.scss'],
    output: {
        filename: 'bundle.js',

        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                options: {
                    presets: ['env']
                }
            },
            {
                test: /\.(scss|css)$/,

                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: [
                     { loader: 'css-loader'},
                     { loader: 'postcss-loader' },
                     { loader: 'sass-loader' }
                    ],
                    filename : 'mains.css',
                    publicPath: '/build/'

                })
            }
        ]
    },

    plugins: [

    extractCSS,

    ],
    mode: 'development',

    optimization: {
        splitChunks: {
            chunks: 'async',
            minSize: 30000,
            minChunks: 1,
            name: true,

            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                }
            }
        }
    },

    devServer:{
        contentBase: './'
    }

};

Answer 1

Webpack documentation advises against using extract-text-webpack-plugin for css

:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

Use the mini-css-extract-plugin instead.

Your webpack config might look something like the following instead:

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

module.exports = {
  mode: 'development',
  entry: ['./src/app.js', './src/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      },
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/main.css',
    }),
  ],

  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      name: true,

      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

  devServer: {
    contentBase: './'
  }
};