Update package.json & webpack

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",
+    "dev": "webpack-dev-server --env.NODE_ENV=development --mode development --open --hot --https",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "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": "^4.17.1",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9",
     "webpack-merge": "^4.1.3"
   },
   "main": "dist/vue-audio-recorder.min.js",

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.exports = (env, args) => {
-  module: {
+  let conf = `./webpack.${env.NODE_ENV === 'production' ? 'prod' : 'dev'}.js`
-    rules: [
+
-      {
+  return merge(require(conf), {
-        test: /\.scss$/,
+    module: {
-        use: [
+      rules: [
-          'vue-style-loader',
+        {
-          'css-loader',
+          test: /\.scss$/,
-          'sass-loader'
+          use: [
-        ],
+            'vue-style-loader',
-      },
+            'css-loader',
-      {
+            'sass-loader'
-        test: /\.vue$/,
+          ],
-        loader: 'vue-loader',
+        },
-        options: {
+        {
-          loaders: {
+          test: /\.vue$/,
-            'scss': [
+          loader: 'vue-loader',
-              'vue-style-loader',
+          options: {
-              'css-loader',
+            loaders: {
-              'sass-loader'
+              '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']
+    resolve: {
-  },
+      alias: {
-  plugins: [
+        'vue$': 'vue/dist/vue.esm.js',
-    new webpack.DefinePlugin({
+        '@': path.resolve(__dirname, 'src')
-      'process.env': {
-        NODE_ENV: `"${process.env.NODE_ENV}"`
       },
-      VERSION: JSON.stringify(require("./package.json").version)
+      extensions: ['*', '.js', '.vue', '.json']
-    }),
+    },
-  ],
+    plugins: [
-  devServer: {
+      new webpack.DefinePlugin({
-    historyApiFallback: true,
+        'process.env': {
-    noInfo: true,
+          NODE_ENV: `"${process.env.NODE_ENV}"`
-    overlay: true
+        },
-  },
+        VERSION: JSON.stringify(require("./package.json").version)
-  performance: {
+      }),
-    hints: false
+    ],
-  }
+    devServer: {
-})
+      historyApiFallback: true,
+      noInfo: true,
+      overlay: true
+    },
+    performance: {
+      hints: false
+    }
+  })
+}

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')

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: {
-  entry: './src/index.js',
+    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
     })