Webpack 4 not outputting files after upgrade

Question

I have been working on a legacy project for the past few days. I've been trying to update packages to modernize this project somewhat. This is an Electron application which I create an installer for after packaging so I need to get access to the outputted webpack bundle.

So after a lot of package upgrades I've managed to get the dev server running just fine and it hot reloads and all those nice things so that is great. I understand that bundle.js and the css files are loaded for memory in this case.

But the problem is when I'm trying to set the output folder for webpack and it's not being created or populated. Before these upgrades the folder would be created and populated with the outputs from webpack just fine, but this has stopped since upgrading to webpack 4.

I would really appreciate any pointers or help that one of you kind people to point out to me. Cheers!

Below are my relevant webpack config files:

webpack.config.production.js

import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const baseConfig = require('./webpack.config.base');

const config = {
  ...baseConfig,

  mode: 'production',

  devtool: 'source-map',

  entry: ['@babel/polyfill', './app/index'],

  plugins: [
    ...baseConfig.plugins,
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new ExtractTextPlugin('style.css', { allChunks: true })
  ],

  output: {
    ...baseConfig.output,

    publicPath: '../dist/'
  },

  module: {
    ...baseConfig.module,

    rules : [
      ...baseConfig.module.rules,

      {
        test: /\.global\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader'
        )
      },

      {
        test: /^((?!\.global).)*\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
        )
      }
    ]
  },
  target: 'electron-renderer'
};

export default config;

webpack.config.base.js

import path from 'path';
import WebpackNotifierPlugin  from 'webpack-notifier';

export default {
  module: {
    rules : [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    mainFields: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },
  plugins: [
    new WebpackNotifierPlugin({excludeWarnings: true})
  ],
  externals: [
  ]
};

Relevant packages

"@babel/core": "^7.1.6",
"webpack": "4.46.0",
"electron": "15.5.5",

Webpack 4 not outputting files after upgrade

0 Answers