webpack base file added, common config moved out to a base config file

Author: udaypydi

config/webpack.base.config.js

@@ -0,0 +1,59 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const paths = require('./paths');
+
+module.exports = function({ plugins }) {
+    return ({
+        entry: {
+            index: paths.entry
+        },
+        output: {
+            path: paths.output,
+            filename: '[name].bundle.js'
+        },
+        module: {
+            rules: [
+                {
+                    test: /(.js|.jsx)/,
+                    exclude: /(node_modules|bower_components)/,
+                    use: 'babel-loader',
+                },
+                {
+                    test: /\.s[ac]ss$/i,
+                    use: [
+                      'style-loader',
+                      'css-loader',
+                      'sass-loader',
+                    ],
+                },
+                {
+                    test: /\.css$/i,
+                    use: ['style-loader', 'css-loader'],
+                },
+                {
+                    test: /\.(png|jpe?g|gif)$/i,
+                    use: [
+                      {
+                        loader: 'file-loader',
+                      },
+                    ],
+                },
+            ]
+        },
+        plugins: [
+            ...plugins,
+            new HtmlWebpackPlugin({
+                template: paths.template,
+                hash: true,
+                title: 'Boilerplate',
+            }),
+            new MiniCssExtractPlugin({
+                filename: '[name].[hash].css',
+                chunkFilename: '[id].[hash].css'
+            }),
+        ],
+        resolve: {
+            extensions: ['.js', 'jsx', '.scss', '.css']
+        },
+    });
+}

config/webpack.dev.config.js

@@ -1,64 +1,13 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const webpackBaseConfig = require('./webpack.base.config');
 const paths = require('./paths');
 
 module.exports = {
     mode: 'development',
-    entry: {
-        index: paths.entry
-    },
     devtool: 'eval-source-map',
-    output: {
-        path: paths.output,
-        filename: '[name].bundle.js',
-        pathinfo: false,
-    },
-    module: {
-        rules: [
-            {
-                test: /(.js|.jsx)/,
-                exclude: /(node_modules|bower_components)/,
-                use: 'babel-loader',
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: [
-                  'style-loader',
-                  'css-loader',
-                  'sass-loader',
-                ],
-            },
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
-            },
-            {
-                test: /\.(png|jpe?g|gif)$/i,
-                use: [
-                  {
-                    loader: 'file-loader',
-                  },
-                ],
-            },
-        ]
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            template: paths.template,
-            hash: true,
-            title: 'Boilerplate',
-        }),
-        new MiniCssExtractPlugin({
-            filename: '[name].css',
-            chunkFilename: '[id].css'
-        })
-    ],
-    resolve: {
-        extensions: ['.js', 'jsx', '.scss', '.css']
-    },
+    ...webpackBaseConfig({ plugins: [] }),
     devServer: {
         contentBase: paths.output,
         port: 9000,
         hot: true,
     }
-}
+};

config/webpack.prod.config.js

@@ -1,65 +1,17 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const paths = require('./paths');
+const webpackBaseConfig = require('./webpack.base.config');
 
 module.exports = {
     mode: 'production',
-    entry: {
-        index: paths.entry
-    },
     devtool: 'cheap-source-map',
-    output: {
-        path: paths.output,
-        filename: '[name].bundle.js'
-    },
-    module: {
-        rules: [
-            {
-                test: /(.js|.jsx)/,
-                exclude: /(node_modules|bower_components)/,
-                use: 'babel-loader',
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: [
-                  'style-loader',
-                  'css-loader',
-                  'sass-loader',
-                ],
-            },
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
-            },
-            {
-                test: /\.(png|jpe?g|gif)$/i,
-                use: [
-                  {
-                    loader: 'file-loader',
-                  },
-                ],
-            },
+    ...webpackBaseConfig({
+        plugins: [
+            new CleanWebpackPlugin(),
+            new BundleAnalyzerPlugin({
+                analyzerMode: 'static',
+                defaultSizes: 'gzip'
+            }),
         ]
-    },
-    plugins: [
-        new CleanWebpackPlugin(),
-        new HtmlWebpackPlugin({
-            template: paths.template,
-            hash: true,
-            title: 'Boilerplate',
-        }),
-        new BundleAnalyzerPlugin({
-            analyzerMode: 'static',
-            defaultSizes: 'gzip'
-        }),
-        new MiniCssExtractPlugin({
-            filename: '[name].[hash].css',
-            chunkFilename: '[id].[hash].css'
-        })
-    ],
-    resolve: {
-        extensions: ['.js', 'jsx', '.scss', '.css']
-    },
-}
+    }),
+};

src/__tests__/__snapshots__/app.spec.js.snap

@@ -8,7 +8,7 @@ exports[`should take a snapshot 1`] = `
     <p
       class="App--Title"
     >
-      Welcome To React Boilerplate
+      Welcome To React Boilerplate!
     </p>
     <img
       alt="React Logo"

src/app.jsx

@@ -5,7 +5,7 @@ import './app.scss';
 export default function App() {
   return (
     <div className="App--Container">
-      <p className="App--Title">Welcome To React Boilerplate</p>
+      <p className="App--Title">Welcome To React Boilerplate!</p>
       <img src={logo} alt="React Logo" className="App--Image" />
     </div>
   );