webpack multi-compiler can not compile 2nd entry point

Question

we use webpack in our Visual Studio C# project to bundle the scripts and styles. These finished bundles css & js files have to be in different folders at the end. For this I wanted to use the multi-compiler from webpack.

If I run the configs separately, it works as expected, it creates a styles.css in the Content/Styles/dist folder and a scripts.js in the Content/Scripts/dist folder. As soon as I want to run both configs with the multi-compiler, the scripts.js is no longer created.

The shortened webpack.config.js looks like this:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');

const buildStyles = {
  name: 'buildStyles',
  entry: {
    styles: './Content/Styles/src/styles.scss'
  },
  output: {
    path: path.resolve(__dirname, 'Content/Styles/dist'),
    filename: '[name].js'
  }
};

const buildScripts = {
  name: 'buildScripts',
  entry: {
    scripts: './Content/Scripts/src/scripts.js'
  },
  output: {
    path: path.resolve(__dirname, 'Content/Scripts/dist'),
    filename: '[name].js',
    globalObject: 'this'
  }
};

const config = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: { presets: ['@babel/preset-env'] }
          }
        ]
      },
      {
        test: /\.s?css$/,
        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: { name: 'fonts/[name].[ext]' }
          }
        ]
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'images/[name].[ext]',
              mimetype: 'image/png'
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: { name: 'images/[name].[ext]' }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new FixStyleOnlyEntriesPlugin(),
  ]
}

module.exports = [{ ...config, ...buildStyles }, { ...config, ...buildScripts }];

After run webpack --config webpack.config.js --mode development we got this:

> Executing task: npm run dev <
> @[email protected] dev C:\Development\PATH
> webpack --config webpack.config.js --mode development

webpack-fix-style-only-entries: removing js from style only module: styles.js
webpack-fix-style-only-entries: removing js from style only module: scripts.js
Hash: a0893d6852ba01de1de9fcbdbd61d1adcdf456cc
Version: webpack 4.44.1
Child buildStyles:
    Hash: a0893d6852ba01de1de9
    Time: 1834ms
    Built at: 2020-10-16 11:14:15
                                   Asset       Size  Chunks             Chunk Names
                 fonts/OpenSans-Bold.ttf    102 KiB          [emitted]  
                 >MANY MORE<                XXX KiB          [emitted]  
                              styles.css    164 KiB  styles  [emitted]  styles
    Entrypoint styles = styles.css
    [./Content/Styles/src/styles.scss] 39 bytes {styles} [built]
        + 2 hidden modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!Content/Styles/src/styles.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./Content/Styles/src/styles.scss] 784 bytes {mini-css-extract-plugin} [built]
            + 30 hidden modules
Child buildScripts:
    Hash: fcbdbd61d1adcdf456cc
    Time: 2253ms
    Built at: 2020-10-16 11:14:15
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Entrypoint scripts =
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    [./Content/Scripts/src/scripts.js] 358 bytes {scripts} [built]
    [./Content/Scripts/src/utilities/dom-observer.js] 3.72 KiB {scripts} [built]
    [./Content/Scripts/src/utilities/dom-ready.js] 662 bytes {scripts} [built]
    >MANY MORE<
    [./Content/Scripts/src/vendors/polyfill.js] 2.86 KiB {scripts} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {scripts} [built]
        + 382 hidden modules

The marked position with an exclamation should actually contain the following:

    Built at: 2020-10-16 11:14:15
    Entrypoint scripts = scripts.js

It looks like it no longer recognizes the scripts.js in multi compile mode. It doesn't matter if I run buildStyles first and then buildScripts, or vice versa. What mistake am i making? I hope someone can help me with the problem.

Best regards

Answer 1

According to the usage docs for clean-webpack-plugin, it will always clear out the entire output directory when using the default config in webpack 4+.

All files inside webpack's output.path directory will be removed once, but the directory itself will not be. If using webpack 4+'s default configuration, everything under <PROJECT_DIR>/dist/ will be removed. Use cleanOnceBeforeBuildPatterns to override this behavior.

You should be able to add the cleanOnceBeforeBuildPatterns option in your webpack config to ensure that files are only removed once. Try:

{
    ...,
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [],
        }),
        ...
    ],
    ...
}