refactor(mc-scripts): no need for webpack config files anymore, as th…

…e default behavior (#1949)

.changeset/hip-needles-study.md

@@ -0,0 +1,13 @@
+---
+'merchant-center-application-template-starter': minor
+'@commercetools-frontend/mc-scripts': minor
+'playground': minor
+---
+
+The `webpack.config.dev.js` and `webpack.config.prod.js` files are not required anymore to be defined in the application folder and can be removed. The default behavior is now implicitly implemented in case the config file is not found. The default behavior requires the following paths to exist:
+
+- `<application_folder>/dist`
+- `<application_folder>/src`
+- `<application_folder>/src/index.js`
+
+> You can still use the config files if you need to configure more specific behaviors.

packages/mc-scripts/src/build.js

@@ -19,6 +19,7 @@ const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
+const createWebpackConfigForProduction = require('./config/create-webpack-config-for-production');
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
@@ -38,10 +39,15 @@ const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 const paths = {
   appBuild: resolveApp('dist/assets'),
   appWebpackConfig: resolveApp('webpack.config.prod.js'),
+  distPath: resolveApp('dist'),
+  entryPoint: resolveApp('src/index.js'),
+  sourceFolders: [resolveApp('src')],
 };
 
+const hasWebpackConfig = fs.existsSync(paths.appWebpackConfig);
+
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appWebpackConfig])) {
+if (!checkRequiredFiles([])) {
   process.exit(1);
 }
 
@@ -101,7 +107,14 @@ measureFileSizesBeforeBuild(paths.appBuild)
 function build(previousFileSizes) {
   console.log('Creating an optimized production build...');
 
-  const compiler = webpack(require(paths.appWebpackConfig));
+  const config = hasWebpackConfig
+    ? require(paths.appWebpackConfig)
+    : createWebpackConfigForProduction({
+        distPath: paths.distPath,
+        entryPoint: paths.entryPoint,
+        sourceFolders: paths.sourceFolders,
+      });
+  const compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       let messages;

packages/mc-scripts/src/start.js

@@ -26,6 +26,7 @@ const {
 } = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
 const createDevServerConfig = require('./config/webpack-dev-server.config');
+const createWebpackConfigForDevelopment = require('./config/create-webpack-config-for-development');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
@@ -41,6 +42,9 @@ const paths = {
   appPublic: resolveApp('public'),
   appWebpackConfig: resolveApp('webpack.config.dev.js'),
   yarnLockFile: resolveApp('yarn.lock'),
+  distPath: resolveApp('dist'),
+  entryPoint: resolveApp('src/index.js'),
+  sourceFolders: [resolveApp('src')],
 };
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
@@ -50,8 +54,10 @@ const isInteractive = process.stdout.isTTY;
 // which is why it's disabled by default.
 const hasReactRefresh = process.env.FAST_REFRESH === 'true';
 
+const hasWebpackConfig = fs.existsSync(paths.appWebpackConfig);
+
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appWebpackConfig])) {
+if (!checkRequiredFiles([])) {
   process.exit(1);
 }
 
@@ -71,7 +77,13 @@ choosePort(HOST, DEFAULT_PORT)
     const appName = require(paths.appPackageJson).name;
     const urls = prepareUrls(protocol, HOST, port);
     // Get webpack config
-    const config = require(paths.appWebpackConfig);
+    const config = hasWebpackConfig
+      ? require(paths.appWebpackConfig)
+      : createWebpackConfigForDevelopment({
+          distPath: paths.distPath,
+          entryPoint: paths.entryPoint,
+          sourceFolders: paths.sourceFolders,
+        });
     const devSocket = {
       warnings: (warnings) =>
         // eslint-disable-next-line @typescript-eslint/no-use-before-define

website/src/content/development/folder-structure.mdx

@@ -41,8 +41,6 @@ After bootstrapping a new application, your project should look like this:
 │   ├── index.js
 │   ├── load-messages.js
 │   └── routes.js
-├── webpack.config.dev.js
-├── webpack.config.prod.js
 └── yarn.lock
 ```