|
| 1 | +const { config } = require('@rails/webpacker') |
| 2 | +const webpack = require('webpack') |
| 3 | +const { merge } = require('webpack-merge') |
| 4 | +const environment = require('./environment') |
| 5 | + |
| 6 | +const clientConfigObject = environment.toWebpackConfig() |
| 7 | + |
| 8 | +const configureServer = () => { |
| 9 | + // We need to use "merge" because the clientConfigObject, EVEN after running |
| 10 | + // toWebpackConfig() is a mutable GLOBAL. Thus any changes, like modifying the |
| 11 | + // entry value will result in changing the client config! |
| 12 | + // Using webpack-merge into an empty object avoids this issue. |
| 13 | + const serverWebpackConfig = merge({}, clientConfigObject) |
| 14 | + |
| 15 | + // We just want the single server bundle entry |
| 16 | + const serverEntry = { |
| 17 | + 'server-bundle': environment.entry.get('server-bundle'), |
| 18 | + } |
| 19 | + serverWebpackConfig.entry = serverEntry |
| 20 | + |
| 21 | + // Remove the mini-css-extract-plugin from the style loaders because |
| 22 | + // the client build will handle exporting CSS. |
| 23 | + // replace file-loader with null-loader |
| 24 | + serverWebpackConfig.module.rules.forEach((loader) => { |
| 25 | + if (loader.use && loader.use.filter) { |
| 26 | + loader.use = loader.use.filter( |
| 27 | + (item) => |
| 28 | + !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)) |
| 29 | + ) |
| 30 | + } |
| 31 | + }) |
| 32 | + |
| 33 | + // No splitting of chunks for a server bundle |
| 34 | + serverWebpackConfig.optimization = { |
| 35 | + minimize: false, |
| 36 | + } |
| 37 | + serverWebpackConfig.plugins.unshift( |
| 38 | + new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) |
| 39 | + ) |
| 40 | + |
| 41 | + // Custom output for the server-bundle that matches the config in |
| 42 | + // config/initializers/react_on_rails.rb |
| 43 | + serverWebpackConfig.output = { |
| 44 | + filename: 'server-bundle.js', |
| 45 | + globalObject: 'this', |
| 46 | + // If using the React on Rails Pro node server renderer, uncomment the next line |
| 47 | + // libraryTarget: 'commonjs2', |
| 48 | + path: config.outputPath, |
| 49 | + publicPath: config.outputPath, |
| 50 | + // https://webpack.js.org/configuration/output/#outputglobalobject |
| 51 | + } |
| 52 | + |
| 53 | + // Don't hash the server bundle b/c would conflict with the client manifest |
| 54 | + // And no need for the MiniCssExtractPlugin |
| 55 | + serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter( |
| 56 | + (plugin) => |
| 57 | + plugin.constructor.name !== 'WebpackAssetsManifest' && |
| 58 | + plugin.constructor.name !== 'MiniCssExtractPlugin' && |
| 59 | + plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin' |
| 60 | + ) |
| 61 | + |
| 62 | + // Critical due to https://github.com/rails/webpacker/pull/2644 |
| 63 | + delete serverWebpackConfig.devServer |
| 64 | + |
| 65 | + // eval works well for the SSR bundle because it's the fastest and shows |
| 66 | + // lines in the server bundle which is good for debugging SSR |
| 67 | + // The default of cheap-module-source-map is slow and provides poor info. |
| 68 | + serverWebpackConfig.devtool = 'eval' |
| 69 | + |
| 70 | + // If using the default 'web', then libraries like Emotion and loadable-components |
| 71 | + // break with SSR. The fix is to use a node renderer and change the target. |
| 72 | + // If using the React on Rails Pro node server renderer, uncomment the next line |
| 73 | + // serverWebpackConfig.target = 'node' |
| 74 | + |
| 75 | + return serverWebpackConfig |
| 76 | +} |
| 77 | + |
| 78 | +module.exports = configureServer |
0 commit comments