Updating the SSR version to webpack 4 : new webpack config

[Sashkan]

I just started working on this awesome project, and I gotta admit it's amazing. Unfortunately, I'm working on the SSR version of it, which is still running with webpack 2.

My idea was to upgrade to webpack 4, and then upgrade the config file so that it would build nicely.

Unfortunately, most of the dependencies were using webpack 2 as well, therefore making it uneasy to just upgrade them.

I came up with the idea of using the output of the original config file, by using a simple log of the client object, and then tweaking it so that it would respect webpack 4 rules.

This is the actual version :

const webpack = require('webpack')
const SpawnPlugin = require('webpack-spawn-plugin')
const ChildConfigPlugin = require('webpack-child-config-plugin')
const HappyPack = require('happypack')
const path = require('path')

const { HotModuleReplacementPlugin, DefinePlugin, ProgressPlugin } = webpack

const host = process.env.HOST || 'localhost'
const port = +process.env.PORT + 1 || 3001
const sourceDir = process.env.SOURCE || 'src'
const publicPath = `/${process.env.PUBLIC_PATH || ''}/`.replace('//', '/')
const sourcePath = path.join(process.cwd(), sourceDir)
const outputPath = path.join(process.cwd(), 'dist/public')
const clientEntryPath = path.join(sourcePath, 'client.js')
const serverEntryPath = path.join(sourcePath, 'server.js')

module.exports = {
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/,
        loader: 'url-loader?limit=8000',
      },
    ],
  },
  plugins: [
    new ProgressPlugin({
      entries: true,
      modules: true,
      profile: true,
    }),
    new HappyPack({
      loaders: ['babel-loader'],
    }),
    new ChildConfigPlugin({
      watching: false,
      options: {
        config: {
          module: {
            rules: [
              {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
              },
              {
                test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/,
                loader: 'url-loader?limit=8000',
              },
            ],
          },
          plugins: [
            new ProgressPlugin({
              entries: true,
              modules: true,
              modulesCount: 100,
              profile: true,
            }),
            new HappyPack({
              loaders: ['babel-loader'],
            }),
            new SpawnPlugin('node', ['.']),
            new DefinePlugin({
              'process.env.NODE_ENV': 'development',
              'process.env.PUBLIC_PATH': '/',
            }),
          ],
          resolve: {
            extensions: ['.js', '.jsx', '.json'],
            modules: ['src', 'node_modules'],
          },
          output: {
            filename: '../[name].js',
            path: outputPath,
            publicPath: '/',
            libraryTarget: 'commonjs2',
          },
          entry: {
            server: [serverEntryPath],
          },
          target: 'node',
          externals: [[Function]],
          stats: 'errors-only',
          devtool: 'source-map',
          watch: true,
        },
        watch: true,
        when: 'done',
      },
    }),
    new DefinePlugin({
      definitions: {
        'process.env.NODE_ENV': '"development"',
        'process.env.PUBLIC_PATH': '/',
      },
    }),
    new HotModuleReplacementPlugin({
      multiStep: true,
      fullBuildTimeout: 200,
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    modules: ['src', 'node_modules'],
  },
  output: {
    filename: '[name].js',
    path: outputPath,
    publicPath,
  },
  entry: {
    client: [clientEntryPath, 'webpack/hot/only-dev-server'],
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    hot: true,
    historyApiFallback: { index: '/' },
    inline: true,
    contentBase: 'public',
    stats: 'errors-only',
    headers: { 'Access-Control-Allow-Origin': '*' },
    host: 'localhost',
    port: 3001,
  },
}

Now, the ugly part...

As the result of a webpack2-based config, I assume that the output includes some deprecated options, especially the result of the ChildConfigPlugin, which must be the reason for the following error:

configuration has an unknown property 'options'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }

But since I have little to no experience with webpack-blocks, I have no idea where this option property comes from.

Any help about how to adapt this to webpack 4 would be greatly appreciated !

[bu6n]

Hi there,
I took over a project using the redux-ssr branch and I would be interested in using with webpack 4. Has someone done any work on this? I must admit I don't really understand everything that's going on here.