1

I'm working on a ssr React application where I was using only Webpack for creating the client bundle. But now I have to add static files like images or custom fonts so I have to create a Webpack server file for bundles the server code as well.

So here's my current setup for loading those files.

From webpack.server.js


module.exports = {
  ...
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
      {
        test: /\.(jpe?g|png|ttf|eot|otf|gif|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: 'url-loader'
      }
    ]
  }
};

From webpack.client.js

module.exports = {
  ...
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
      {
        test: /\.(jpe?g|png|ttf|eot|otf|gif|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: 'url-loader'
      }
    ]
  }
};

So, basically I have the same configuration for including my static files, therefore, I'm going to have the same files into my two bundles client.js and server.js

Actually I have two questions here.

  1. How bad is to have these static files duplicated inside each bundle?

  2. Is there any setup where you can tell Webpack to export the common static files to an isolated file where client.js and server.js can take them?

Thank you!

diemate
  • 11
  • 2

0 Answers0