Change to webpack 4

.babelrc

@@ -1,4 +1,11 @@
 {
-  "presets": ["es2015"],
-  "plugins": ["transform-object-rest-spread","transform-vue-jsx"]
+  "presets": [
+    ["@babel/preset-env", {
+      "modules": "commonjs",
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
+        "node": "current"
+      }
+    }]
+  ]
 }

.eslintignore

@@ -0,0 +1,3 @@
+/build/
+/config/
+/dist/

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+    node: true,
+    mocha: true
+  },
+  "globals": {
+    "expect": true
+  },
+  extends: [
+    'plugin:vue/recommended',
+    'standard'
+  ],
+  plugins: [
+    'vue'
+  ],
+  rules: {
+    'generator-star-spacing': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

@@ -1 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# jest test coverage
+.jest_coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
 node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# built files
+dist

README.md

@@ -1,4 +1,6 @@
 # vue file base64
+This package is based on the [vue-file-base64](https://github.com/BosNaufal/vue-file-base64) package by Naufal Rabbani.
+
 [Vue](http://vuejs.org) Component for Converting Files to base64. It's based on [Dev Mozilla Website](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)
 
 [DEMO](https://rawgit.com/BosNaufal/vue-file-base64/master/index.html)
@@ -57,15 +59,9 @@ Is your component support multiple file?
 #### done (Function)
 Callback Function When File has done proceed
 
-
 ## Thank You for Making this useful~
 
-## Let's talk about some projects with me
-Just Contact Me At:
-- Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com)
-- Skype Id: bosnaufal254
-- twitter: [@BosNaufal](https://twitter.com/BosNaufal)
-
 ## License
-[MIT](http://opensource.org/licenses/MIT)
-Copyright (c) 2016 - forever Naufal Rabbani
+This package is based on the [vue-file-base64](https://github.com/BosNaufal/vue-file-base64) package by Naufal Rabbani.
+
+It is licensed as [MIT](http://opensource.org/licenses/MIT)

build/utils.js

@@ -0,0 +1,14 @@
+'use strict'
+
+const path = require('path')
+
+module.exports = {
+  resolve: function (dir) {
+    return path.join(__dirname, '..', dir)
+  },
+
+  assetsPath: function (_path) {
+    const assetsSubDirectory = 'static'
+    return path.posix.join(assetsSubDirectory, _path)
+  }
+}

build/webpack.config.base.js

@@ -0,0 +1,71 @@
+'use strict'
+
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const { VueLoaderPlugin } = require('vue-loader')
+
+const utils = require('./utils')
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'assets': utils.resolve('assets'),
+      'components': utils.resolve('src/components')
+    }
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        use: 'eslint-loader',
+        enforce: 'pre'
+      }, {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      }, {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+        }
+      }, {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          }
+        }
+      }, {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: utils.assetsPath('media/[name].[hash:7].[ext]')
+          }
+        }
+      }, {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          }
+        }
+      }
+    ]
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new VueLoaderPlugin()
+  ]
+}

build/webpack.config.dev.js

@@ -0,0 +1,51 @@
+'use strict'
+
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.config.base')
+
+const HOST = 'localhost'
+const PORT = 8080
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+
+  devServer: {
+    clientLogLevel: 'warning',
+    hot: true,
+    contentBase: 'dist',
+    compress: true,
+    host: HOST,
+    port: PORT,
+    open: true,
+    overlay: { warnings: false, errors: true },
+    publicPath: '/',
+    quiet: true,
+    watchOptions: {
+      poll: true
+    }
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ]
+      }, {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader'
+        ]
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ]
+})

build/webpack.config.prod.js

@@ -0,0 +1,43 @@
+'use strict'
+
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.config.base')
+const MiniCssExtractPlugin  = require('mini-css-extract-plugin')
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          chunks: "all",
+        },
+      },
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css?$/,
+        use: [
+          MiniCssExtractPlugin.loader, 
+          'css-loader'
+        ]
+      }, {
+        test: /\.styl(us)?$/,
+        use: [
+          MiniCssExtractPlugin.loader, 
+          'css-loader', 
+          'stylus-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'main.css'
+    })
+  ]
+})