mini-css-extract-plugin generates two additional JS files

Question

I'm using the following webpack.config.js file to build two CSS files (editor.css and style.css) and a JS file (block.build.js) making use of the mini-css-extract-plugin plugin:

// Load webpack for use of certain webpack tools and methods
const webpack = require( 'webpack' );
// For extracting CSS (and SASS) into separate files
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

// Define JavaScript entry points
const entryPointNames = [ 'blocks', 'frontend' ];

// Setup externals
const externals = {};
// Setup external for each entry point
entryPointNames.forEach( entryPointName => {
  externals[ '@/lg6' + entryPointName ] = {
    this: [ 'lg6', entryPointName ]
  }
} );

// Define WordPress dependencies
const wpDependencies = [ 'components', 'element', 'blocks', 'utils', 'date' ];
// Setup externals for all WordPress dependencies
wpDependencies.forEach( wpDependency => {
  externals[ '@wordpress/' + wpDependency ] = {
    this: [ 'wp', wpDependency ]
  };
});

// Start of main webpack config
const config = {
  // Set mode
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  // Go through each entry point and prepare for use with externals
  entry: {
      index: './index.js',
      style: './style.scss',
      editor: './editor.scss',
  },
  // Include externals
  externals,
  // Set output
  output: {
    // Place all bundles JS in current directory
    filename: 'block.build.js',
    path: __dirname,
    library: [ 'pluginnamespace', '[name]' ],
    libraryTarget: 'this'
  },
  // Fall back to node_modules for file resolution
  resolve: {
    modules: [ __dirname, 'node_modules' ]
  },
  optimization: {
    splitChunks: {
        cacheGroups: {
            editor: {
                name: 'editor',
                test: /editor\.(sc|sa|c)ss$/,
                chunks: 'all',
                enforce: true,
            },
            style: {
                name: 'style',
                test: /style\.(sc|sa|c)ss$/,
                chunks: 'all',
                enforce: true,
            },
            default: false,
        },
    },
  },
  module: {
    rules: [
      {
        // Run JavaScript files through Babel
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        // Setup SASS (and CSS) to be extracted
        test: /\.(sc|sa|c)ss$/,
        exclude: /node_modules/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader,
            },
            {
                loader: 'css-loader',
                options: {
                    sourceMap: process.env.NODE_ENV !== 'production',
                },
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [ require( 'autoprefixer' ) ]
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: process.env.NODE_ENV !== 'production',
                },
            },
        ],          
      },
    ]
  },
  plugins: [
    // Setup environment conditions
    new webpack.DefinePlugin( {
      'process.env.NODE_ENV': JSON.stringify(
        process.env.NODE_ENV || 'development'
      )
    } ),
    new MiniCssExtractPlugin( {
        filename: './css/[name].css',
    } ),
    // For migrations from webpack 1 to webpack 2+
    new webpack.LoaderOptionsPlugin( {
      minimize: process.env.NODE_ENV === 'production',
      debug: process.env.NODE_ENV !== 'production',
    } )
  ],
  // Do not include information about children in stats
  stats: {
    children: false
  }
};

module.exports = config;

Everything is working as expected but, for some reason, in addition to the block.build.js file, I'm getting two more JS files named 0.block.build.js and 2.block.build.js with the following content:

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,function(n,w,o){}]]);

My question is, why are these two additional files are being created and how can I avoid this?

Thanks in advance

I suppose if you remove the scss entry, you don't have this exta files. It's due to the fact that webpack is a javascript bundler. Each extra css file will automatically create an empty (like yours) js file. There aren't a perfect solution this avoid it, you can just manually remove them using the webpack hooks event at end of operation. — BENARD Patrick
– BENARD Patrick, Commented Aug 19, 2019 at 5:17

Tony · Accepted Answer · 2019-08-19 13:55:38Z

5

You should remove these 2 line

  style: './style.scss',
  editor: './editor.scss',

Also you can import those 2 scss file in your index.js

import "style.scss";
import "editor.scss";

And mini-css-extract-plugin will take care the rest for you

answered Aug 19, 2019 at 13:55

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

leemon · Accepted Answer · 2019-08-25 08:16:11Z

2

As an alternative, if you don't want to import the scss files in your js files, I found you can use a webpack plugin such as Ignore Emit Webpack in your webpack.config.js file to prevent the creation of the extra js files:

const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new IgnoreEmitPlugin(['0.block.build.js', '2.block.build.js'])
    ]
    // ...
};

answered Aug 25, 2019 at 8:16

leemon

1,1115 gold badges24 silver badges50 bronze badges

Collectives™ on Stack Overflow

mini-css-extract-plugin generates two additional JS files

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related