New webpack config, scripts & moved dist, favicons & assets to /public

webpack.config.js

@@ -1,88 +1,97 @@
-var path = require('path')
-var webpack = require('webpack')
+const path = require("path");
+const webpack = require("webpack");
+const sass = require("sass");
+
+const { VueLoaderPlugin } = require("vue-loader");
+// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
+const publicPath = path.resolve(__dirname, "public");
+const isProd = process.env.NODE_ENV === "production";
 
 module.exports = {
-  entry: './src/main.js',
+  context: path.resolve(__dirname, "src"),
+  entry: "/main.js",
   output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'build.js'
+    path: `${publicPath}/dist/`,
+    publicPath: "/dist/",
+    filename: "build.js",
+    clean: true
   },
   module: {
     rules: [
-      {
-        test: /\.vue$/,
-        use: [
-          {
-            loader: 'vue-loader',
-            options: {
-              loaders: {
-                'scss': 'vue-style-loader!css-loader!sass-loader',
-                'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
-              }
-            }
-          },
-          {
-            loader: 'vue-svg-inline-loader'
-          }
-        ]
-      },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
         options: {
-          presets: ['@babel/preset-env']
+          presets: ["@babel/preset-env"]
         },
         exclude: /node_modules/
       },
+      {
+        test: /\.vue$/,
+        use: ["vue-loader"]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          "vue-style-loader",
+          // isProd ? MiniCssExtractPlugin.loader : "vue-style-loader",
+          "css-loader",
+          "sass-loader"
+        ]
+      },
       {
         test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
+        loader: "file-loader",
         options: {
-          name: '[name].[ext]'
-          // name: '[name].[ext]?[hash]'
+          name: "[name].[ext]?[hash]"
         }
       }
     ]
   },
+  plugins: [new VueLoaderPlugin()],
   resolve: {
-    extensions: ['.js', '.vue', '.json', 'scss'],
+    extensions: [".js", ".vue", ".json", ".scss"],
     alias: {
-      'vue$': 'vue/dist/vue.common.js',
-      '@': path.resolve(__dirname, './src'),
-      'src': path.resolve(__dirname, './src'),
-      'assets': path.resolve(__dirname, './src/assets'),
-      'components': path.resolve(__dirname, './src/components')
+      vue$: "vue/dist/vue.common.js",
+      "@": path.resolve(__dirname, "src"),
+      src: path.resolve(__dirname, "src"),
+      assets: `${publicPath}/assets`,
+      components: path.resolve(__dirname, "src/components")
     }
   },
   devServer: {
-    historyApiFallback: true,
-    inline: true,
-    noInfo: true
+    static: publicPath,
+    historyApiFallback: {
+      index: "index.html"
+    },
+    compress: true,
+    port: 8080
   },
   performance: {
     hints: false
   },
-  devtool: 'inline-source-map'
-}
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+        }
+      })
+    ]
+  },
+  devtool: "inline-source-map"
+};
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ])
+if (isProd) {
+  module.exports.mode = "production";
+  module.exports.devtool = false;
+  // module.exports.plugins.push(
+  //   new MiniCssExtractPlugin({
+  //     filename: "[name].css",
+  //     chunkFilename: "[id].css"
+  //   })
+  // );
 }