title: Switch over to Create React App on Existing Project?
body: <p>I have an existing application that I am using "<a href="https://github.com/webpack-contrib/webpack-serve" rel="noreferrer">webpack-serve</a>" as it was recommended to me by the developer(at that time he was not going to update webpack-dev-server anymore).</p>
  
  <p>Anyways now it is deprecated and not being used, I got to back to webpack-dev-server but I am thinking if I should just go through the effort and try to use something like "Create React App" as I don't really know if I can use these old wepack.js files I made for webpack-serve and they also don't seem to work 100% as everytime I try to build a production build it gives me a dev build.</p>
  
  <p>webpack.common.js</p>
  
  <pre><code>const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const CleanWebpackPlugin = require("clean-webpack-plugin");
  const webpack = require('webpack');
  
  module.exports = {
    entry: ["@babel/polyfill", "./src/index.js"],
    output: {
      // filename and path are required
      filename: "main.js",
      path: path.resolve(__dirname, "dist"),
      publicPath: '/'
    },
    module: {
      rules: [
        {
          // JSX and JS are all .js
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          }
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'file-loader',
              options: {}  
            }
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {}
            }
          ]
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(["dist"]),
      new HtmlWebpackPlugin({
        template: "./src/index.html"
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
     })
    ]
  };
  </code></pre>
  
  <p>webpack.dev</p>
  
  <pre><code>const path = require("path");
  const merge = require("webpack-merge");
  const convert = require("koa-connect");
  const proxy = require("http-proxy-middleware");
  const historyApiFallback = require("koa2-connect-history-api-fallback");
  
  const common = require("./webpack.common.js");
  
  module.exports = merge(common, {
    // Provides process.env.NODE_ENV with value development.
    // Enables NamedChunksPlugin and NamedModulesPlugin.
    mode: "development",
    devtool: "inline-source-map",
    // configure `webpack-serve` options here
    serve: {
      // The path, or array of paths, from which static content will be served.
      // Default: process.cwd()
      // see https://github.com/webpack-contrib/webpack-serve#options
      content: path.resolve(__dirname, "dist"),
      add: (app, middleware, options) =&gt; {
        // SPA are usually served through index.html so when the user refresh from another
        // location say /about, the server will fail to GET anything from /about. We use
        // HTML5 History API to change the requested location to the index we specified
        app.use(historyApiFallback());
        app.use(
          convert(
            // Although we are using HTML History API to redirect any sub-directory requests to index.html,
            // the server is still requesting resources like JavaScript in relative paths,
            // for example http://localhost:8080/users/main.js, therefore we need proxy to
            // redirect all non-html sub-directory requests back to base path too
            proxy(
              // if pathname matches RegEx and is GET
              (pathname, req) =&gt; pathname.match("/.*/") &amp;&amp; req.method === "GET",
              {
                // options.target, required
                target: "http://localhost:8080",
                pathRewrite: {
                  "^/.*/": "/" // rewrite back to base path
                }
              }
            )
          )
        );
      }
    },
    module: {
      rules: [
        {
          test: /\.(sa|sc|c)ss$/,
          use: ["style-loader", "css-loader", "sass-loader"]
        }
      ]
    }
  });
  </code></pre>
  
  <p>webpack.prod</p>
  
  <pre><code>const merge = require("webpack-merge");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  const common = require("./webpack.common.js");
  
  module.exports = merge(common, {
    // Provides process.env.NODE_ENV with value production.
    // Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,
    // ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,
    // SideEffectsFlagPlugin and UglifyJsPlugin.
    mode: "production",
    devtool: "source-map",
    // see https://webpack.js.org/configuration/optimization/
    optimization: {
      // minimize default is true
      minimizer: [
        // Optimize/minimize CSS assets.
        // Solves extract-text-webpack-plugin CSS duplication problem
        // By default it uses cssnano but a custom CSS processor can be specified
        new OptimizeCSSAssetsPlugin({})
      ]
    },
    module: {
      rules: [
        {
          test: /\.(sa|sc|c)ss$/,
          // only use MiniCssExtractPlugin in production and without style-loader
          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
        }
      ]
    },
    plugins: [
      // Mini CSS Extract plugin extracts CSS into separate files.
      // It creates a CSS file per JS file which contains CSS.
      // It supports On-Demand-Loading of CSS and SourceMaps.
      // It requires webpack 4 to work.
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new BundleAnalyzerPlugin()
    ]
  });
  </code></pre>
  
  <p>Edit</p>
  
  <p>If I where to go over to Create React App how would I handle this stuff?</p>
  
  <p>I have a .babelrc with</p>
  
  <pre><code>  "presets": ["@babel/env", "@babel/react"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      "@babel/plugin-transform-object-assign",
      "@babel/plugin-proposal-object-rest-spread",
      "transform-class-properties",
      "emotion"
    ]
  </code></pre>
  
  <p>I think react-app takes care of some of the stuff but not sure if all. I also have if you noticed in webpack.common I am pollying filling everything, would I just need "react-app-polyfill."?</p>
  
  <p>How can I add another "dev mode"</p>
  
  <pre><code>  "scripts": {
      "dev": "cross-env NODE_ENV=dev webpack-serve --config webpack.dev.js --open",
      "prod": "cross-env NODE_ENV=prod  webpack -p --config webpack.prod.js",
      "qa": "cross-env NODE_ENV=QA webpack --config webpack.prod.js"
    },
  </code></pre>
  
  <p>I need to setup the Node_ENV for QA as I have a check to point to my api that changes in each enviroment.</p>