From 5d8139d674a16e7823854045d757da0f1ccf304e Mon Sep 17 00:00:00 2001
From: Gennady Grishkovtsov <grishkovelli@gmail.com>
Date: Fri, 5 Oct 2018 22:51:20 +0300
Subject: [PATCH] Update package.json & webpack

---
 package.json      |  12 +++--
 webpack.config.js | 121 ++++++++++++++++++++++++----------------------
 webpack.dev.js    |   1 -
 webpack.prod.js   |  21 +++++---
 4 files changed, 82 insertions(+), 73 deletions(-)

diff --git a/package.json b/package.json
index 03e7205..2bb3681 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
   "author": "Gennady Grishkovtsov <grishkovelli@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --https",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "dev": "webpack-dev-server --env.NODE_ENV=development --mode development --open --hot --https",
+    "build": "webpack --env.NODE_ENV=production --mode production --progress --hide-modules"
   },
   "dependencies": {},
   "browserslist": [
@@ -26,11 +26,13 @@
     "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
+    "uglifyjs-webpack-plugin": "^2.0.1",
     "vue": "^2.5.16",
-    "vue-loader": "^13.0.5",
+    "vue-loader": "^14.2.2",
     "vue-template-compiler": "^2.4.4",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9",
     "webpack-merge": "^4.1.3"
   },
   "main": "dist/vue-audio-recorder.min.js",
diff --git a/webpack.config.js b/webpack.config.js
index e0ef09d..3a8540d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,67 +1,70 @@
 const webpack = require('webpack')
 const merge = require('webpack-merge')
-const env = `./webpack.${process.env.NODE_ENV === 'production' ? 'prod' : 'dev'}.js`
 const path = require('path')
 
-module.exports = merge(require(env), {
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        use: [
-          'vue-style-loader',
-          'css-loader',
-          'sass-loader'
-        ],
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            'scss': [
-              'vue-style-loader',
-              'css-loader',
-              'sass-loader'
-            ]
+module.exports = (env, args) => {
+  let conf = `./webpack.${env.NODE_ENV === 'production' ? 'prod' : 'dev'}.js`
+
+  return merge(require(conf), {
+    module: {
+      rules: [
+        {
+          test: /\.scss$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            'sass-loader'
+          ],
+        },
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader',
+          options: {
+            loaders: {
+              'scss': [
+                'vue-style-loader',
+                'css-loader',
+                'sass-loader'
+              ]
+            }
+          }
+        },
+        {
+          test: /\.js$/,
+          loader: 'babel-loader',
+          exclude: /node_modules/
+        },
+        {
+          test: /\.(png|jpg|gif|svg)$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]?[hash]'
           }
         }
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  resolve: {
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': path.resolve(__dirname, 'src')
+      ]
     },
-    extensions: ['*', '.js', '.vue', '.json']
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: `"${process.env.NODE_ENV}"`
+    resolve: {
+      alias: {
+        'vue$': 'vue/dist/vue.esm.js',
+        '@': path.resolve(__dirname, 'src')
       },
-      VERSION: JSON.stringify(require("./package.json").version)
-    }),
-  ],
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true,
-    overlay: true
-  },
-  performance: {
-    hints: false
-  }
-})
+      extensions: ['*', '.js', '.vue', '.json']
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: `"${process.env.NODE_ENV}"`
+        },
+        VERSION: JSON.stringify(require("./package.json").version)
+      }),
+    ],
+    devServer: {
+      historyApiFallback: true,
+      noInfo: true,
+      overlay: true
+    },
+    performance: {
+      hints: false
+    }
+  })
+}
diff --git a/webpack.dev.js b/webpack.dev.js
index 6686567..cab5be9 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -2,7 +2,6 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  devtool: '#eval-source-map',
   entry: './demo/index.js',
   output: {
     path: path.resolve(__dirname, './demo')
diff --git a/webpack.prod.js b/webpack.prod.js
index 02c2384..e26d5af 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -1,9 +1,11 @@
 const path = require('path')
 const webpack = require('webpack')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = {
-  devtool: '#source-map',
-  entry: './src/index.js',
+  entry: {
+    main: './src/index.js'
+  },
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'vue-audio-recorder.min.js',
@@ -12,18 +14,21 @@ module.exports = {
     libraryExport: 'default',
     umdNamedDefine: true
   },
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true
+      })
+    ]
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: true
-      }
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: false
     })