modify webpack config

Author: Edward Xiao

webpack/base.js

@@ -3,7 +3,6 @@ const path = require('path');
 const PATH = require('./build_path');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 var config = (module.exports = {
   context: PATH.ROOT_PATH,
   entry: {
@@ -182,7 +181,6 @@ var config = (module.exports = {
     compress: true,
     disableHostCheck: true,
     historyApiFallback: true,
-
     host: '0.0.0.0',
     port: 9000,
   },
@@ -200,24 +198,5 @@ var config = (module.exports = {
     new WebpackAssetsManifest({
       fileName: 'manifest-rev.json',
     }),
-    new HtmlWebpackPlugin({
-      template: PATH.HTML_PATH + '/layout.html',
-      title: 'react-inputs-validation',
-      page: 'index',
-      filename: 'index.html',
-      hash: false,
-      chunksSortMode: function(chunk1, chunk2) {
-        var orders = ['index'];
-        var order1 = orders.indexOf(chunk1.names[0]);
-        var order2 = orders.indexOf(chunk2.names[0]);
-        if (order1 > order2) {
-          return 1;
-        } else if (order1 < order2) {
-          return -1;
-        } else {
-          return 0;
-        }
-      },
-    }),
   ],
 });

webpack/development.config.js

@@ -1,14 +1,37 @@
 const base = require('./base.js');
+const PATH = require('./build_path');
 const objectAssign = require('object-assign');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
 const PATH = require('./build_path');
 const config = objectAssign(base, {
   mode: 'development',
   output: {
     publicPath: '/',
-    filename: '[name].js'
-  }
+    filename: '[name].js',
+  },
 });
-config.plugins.push(new MiniCssExtractPlugin({ filename: 'css/[name].css' }));
+config.plugins.push(
+  new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
+  new HtmlWebpackPlugin({
+    template: PATH.HTML_PATH + '/layout.html',
+    title: 'react-inputs-validation',
+    page: 'index',
+    filename: 'index.html',
+    hash: false,
+    chunksSortMode: function(chunk1, chunk2) {
+      var orders = ['index'];
+      var order1 = orders.indexOf(chunk1.names[0]);
+      var order2 = orders.indexOf(chunk2.names[0]);
+      if (order1 > order2) {
+        return 1;
+      } else if (order1 < order2) {
+        return -1;
+      } else {
+        return 0;
+      }
+    },
+  }),
+);
 module.exports = config;

webpack/production.config.js

@@ -1,32 +1,55 @@
 const base = require('./base.js');
+const PATH = require('./build_path');
 const objectAssign = require('object-assign');
 const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 const config = objectAssign(base, {
   mode: 'production',
   devtool: 'cheap-source-map',
   output: {
-    publicPath: '/',
-    filename: '[name]-[chunkhash].js'
+    publicPath: '/react-inputs-validation/dist/',
+    filename: '[name]-[chunkhash].js',
   },
   optimization: {
     minimizer: [
       new UglifyJSPlugin({
         uglifyOptions: {
           output: {
-            comments: false
+            comments: false,
           },
           compress: {
-            warnings: false
-          }
-        }
-      })
-    ]
-  }
+            warnings: false,
+          },
+        },
+      }),
+    ],
+  },
 });
 
-config.plugins.push(new MiniCssExtractPlugin({ filename: 'css/[name]-[hash].css' }));
+config.plugins.push(
+  new MiniCssExtractPlugin({ filename: 'css/[name]-[hash].css' }),
+  new HtmlWebpackPlugin({
+    template: PATH.HTML_PATH + '/layout.html',
+    title: 'react-inputs-validation',
+    page: 'index',
+    filename: '../index.html',
+    hash: false,
+    chunksSortMode: function(chunk1, chunk2) {
+      var orders = ['index'];
+      var order1 = orders.indexOf(chunk1.names[0]);
+      var order2 = orders.indexOf(chunk2.names[0]);
+      if (order1 > order2) {
+        return 1;
+      } else if (order1 < order2) {
+        return -1;
+      } else {
+        return 0;
+      }
+    },
+  }),
+);
 
 module.exports = config;