Config on one or more entry

Question

I want to apply optimization on some entries, not all.

Is there a way to do it ?

For example :

const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/client.js',
    server: './src/server.js',
  },
  output: {
    path: __dirname + '/dist',
    chunkFilename: '[name].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        loader:['style-loader', 'css-loader']
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
          },
        ],
      },
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new CopyPlugin([
      { from: 'public/index.html' },
    ])
  ],
  devtool: 'inline-source-map',
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    runtimeChunk: {
      name: entrypoint => `runtime_${entrypoint.name}`,
    },
  },
  devServer: {
    publicPath: '/dist',
    contentBase: __dirname + '/dist',
    hot: true,
  }
};

I want to apply optimization only on client (app) entry, not on server.

I can duplicate exports, creating one for my client app, and one for my server, but i will duplicate every modules, rules, plugins and other configurations that will evolves ! so bad scalibility.

I search for something but found nothing... I don't how and where, I thought I could do this with a

only : 'app',

but I cannot find it again, maybe this was in my dreams xD

btw, if you think i can upgrade my webpack.config, if you have any suggestions, feel free to share !

Thx all !

Answer 1

Since you are working on an isomorphic setup here, (as it looks). You would want to use two separate webpack configurations.

There are some properties like target which can only be set to one value and apply to your entire set of entries and compilation.

Luckily webpack does allow you to return an array of configuration objects!