Merge pull request redwoodjs#312 from Idered/feat/custom-webpack-config

Handle custom webpack config
Axighi · Mar 22, 2020 · 8230dc5 · 8230dc5
2 parents cbfaf23 + 809492d
commit 8230dc5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 3 deletions.
diff --git a/packages/core/config/webpack.common.js b/packages/core/config/webpack.common.js
@@ -8,6 +8,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
 const Dotenv = require('dotenv-webpack')
 const { getConfig, getPaths } = require('@redwoodjs/internal')
+const { existsSync } = require('fs')
+const merge = require('webpack-merge')
 
 const redwoodConfig = getConfig()
 const redwoodPaths = getPaths()
@@ -197,3 +199,18 @@ module.exports = (webpackEnv) => {
     },
   }
 }
+
+module.exports['mergeUserWebpackConfig'] = (mode, baseConfig) => {
+  const redwoodPaths = getPaths()
+  const hasCustomConfig = existsSync(redwoodPaths.web.webpack)
+  if (!hasCustomConfig) {
+    return baseConfig
+  }
+  const userWebpackConfig = require(redwoodPaths.web.webpack)
+
+  if (typeof userWebpackConfig === 'function') {
+    return userWebpackConfig(baseConfig, {mode})
+  }
+
+  return merge(baseConfig, userWebpackConfig)
+}
diff --git a/packages/core/config/webpack.development.js b/packages/core/config/webpack.development.js
@@ -1,11 +1,12 @@
 const merge = require('webpack-merge')
 const escapeRegExp = require('lodash.escaperegexp')
 const { getConfig } = require('@redwoodjs/internal')
-
 const webpackConfig = require('./webpack.common')
+
+const { mergeUserWebpackConfig } = webpackConfig
 const redwoodConfig = getConfig()
 
-module.exports = merge(webpackConfig('development'), {
+const baseConfig = merge(webpackConfig('development'), {
   devServer: {
     // https://webpack.js.org/configuration/dev-server/
     hot: true,
@@ -34,3 +35,5 @@ module.exports = merge(webpackConfig('development'), {
     splitChunks: false,
   },
 })
+
+module.exports = mergeUserWebpackConfig('development', baseConfig)
diff --git a/packages/core/config/webpack.production.js b/packages/core/config/webpack.production.js
@@ -1,3 +1,5 @@
 const webpackConfig = require('./webpack.common')
+const { mergeUserWebpackConfig } = webpackConfig
+const baseConfig = webpackConfig('production')
 
-module.exports = webpackConfig('production')
+module.exports = mergeUserWebpackConfig('production', baseConfig)
diff --git a/packages/internal/src/paths.ts b/packages/internal/src/paths.ts
@@ -18,6 +18,7 @@ const PATH_WEB_DIR_LAYOUTS = 'web/src/layouts/'
 const PATH_WEB_DIR_PAGES = 'web/src/pages/'
 const PATH_WEB_DIR_COMPONENTS = 'web/src/components'
 const PATH_WEB_DIR_SRC = 'web/src'
+const PATH_WEB_DIR_CONFIG = 'web/config/webpack.config.js'
 
 /**
  * Search the parent directories for the Redwood configuration file.
@@ -59,6 +60,7 @@ export const getPaths = (BASE_DIR: string = getBaseDir()): Paths => {
       components: path.join(BASE_DIR, PATH_WEB_DIR_COMPONENTS),
       layouts: path.join(BASE_DIR, PATH_WEB_DIR_LAYOUTS),
       src: path.join(BASE_DIR, PATH_WEB_DIR_SRC),
+      webpack: path.join(BASE_DIR, PATH_WEB_DIR_CONFIG),
     },
   }
 }

diff --git a/packages/internal/src/types.ts b/packages/internal/src/types.ts
@@ -21,6 +21,7 @@ export type Paths = {
     components: string
     layouts: string
     src: string
+    webpack: string
   }
   api: {
     db: string