Update devDependencies

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
 
+    'no-control-regex': 0,
     'no-useless-escape': 0,
     'comma-dangle': 0,
     'space-before-function-paren': 0,

dist/vue-upload-component.part.css

@@ -1,34 +1,7 @@
 
-
+.file-uploads{overflow:hidden;position:relative;text-align:center;display:inline-block
-
-
-
-
-
-.file-uploads {
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  display: inline-block;
 }
-.file-uploads.file-uploads-html4 input[type="file"] {
+.file-uploads.file-uploads-html4 input[type=file]{opacity:0;font-size:20em;z-index:1;top:0;left:0;right:0;bottom:0;position:absolute;width:100%;height:100%
-  opacity: 0;
-  font-size: 20em;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
 }
-.file-uploads.file-uploads-html5 input[type="file"] {
+.file-uploads.file-uploads-html5 input[type=file]{overflow:hidden;position:fixed;width:1px;height:1px;z-index:-1;opacity:0
-  overflow: hidden;
+}
-  position: fixed;
-  width: 1px;
-  height: 1px;
-  z-index: -1;
-  opacity: 0;
-}
-

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-upload-component",
   "description": "Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter",
-  "version": "2.8.6",
+  "version": "2.8.7",
   "author": "LianYue",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server",
@@ -43,39 +43,42 @@
   "homepage": "https://github.com/lian-yue/vue-upload-component#readme",
   "dependencies": {},
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.0.1",
+    "babel-eslint": "^8.2.3",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2017": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
-    "cross-env": "^1.0.6",
+    "cross-env": "^5.1.6",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.11",
-    "eslint": "^4.8.0",
+    "eslint": "^4.19.1",
-    "eslint-config-standard": "^11.0.0-beta.0",
+    "eslint-config-standard": "^11.0.0",
-    "eslint-loader": "^1.9.0",
+    "eslint-loader": "^2.0.0",
-    "eslint-plugin-html": "^3.2.2",
+    "eslint-plugin-html": "^4.0.3",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-standard": "^3.1.0",
-    "eslint-plugin-vue": "^3.13.0",
+    "eslint-plugin-vue": "^4.5.0",
+    "postcss": "^6.0.22",
     "raw-loader": "^0.5.1",
-    "rollup": "^0.50.0",
+    "rollup": "^0.59.3",
-    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-commonjs": "^8.2.1",
+    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-css-only": "^0.4.0",
-    "rollup-plugin-uglify": "^2.0.1",
+    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-vue": "^2.5.2",
+    "rollup-plugin-uglify": "^4.0.0",
-    "vue-hot-reload-api": "^2.1.1",
+    "rollup-plugin-vue": "^4.1.4",
-    "vue-loader": "^13.0.5",
+    "vue-hot-reload-api": "^2.3.0",
-    "vue-template-compiler": "^2.4.4",
+    "vue-loader": "^15.2.0",
-    "webpack": "^3.6.0",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.8.3",
     "webpack-body-parser": "^1.11.110",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-cli": "^2.1.4",
-    "webpack-merge": "^4.1.0"
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.2"
   }
 }

rollup.config.js

@@ -1,9 +1,10 @@
 import resolve from 'rollup-plugin-node-resolve'
 import commonjs from 'rollup-plugin-commonjs'
 import babel from 'rollup-plugin-babel'
-import uglify from 'rollup-plugin-uglify'
+import { uglify } from 'rollup-plugin-uglify'
 import vue from 'rollup-plugin-vue'
 import packageInfo from './package.json'
+const pluginCSS = require('rollup-plugin-css-only')
 
 
 // const isDev = process.env.NODE_ENV === 'development'
@@ -13,6 +14,8 @@ function baseConfig() {
   return {
     output: {
       format: 'umd',
+      sourcemap: true,
+      banner: `/*!\n * Name: ${packageInfo.name}\n * Version: ${packageInfo.version}\n * Author: ${packageInfo.author}\n */`,
     },
     plugins: [
       resolve({
@@ -29,8 +32,6 @@ function baseConfig() {
         ],
       }),
     ],
-    banner: `/*!\n * Name: ${packageInfo.name}\n * Version: ${packageInfo.version}\n * Author: ${packageInfo.author}\n */`,
-    sourcemap: true,
   }
 }
 
@@ -40,7 +41,6 @@ config.output.file = 'dist/vue-upload-component.js'
 config.output.name = 'VueUploadComponent'
 config.plugins.push(
   vue({
-    autoStyles: false,
     css: true,
   }),
   babel()
@@ -52,7 +52,14 @@ configMin.output.file = 'dist/vue-upload-component.min.js'
 configMin.output.name = 'VueUploadComponent'
 configMin.plugins.push(
   vue({
-    autoStyles: false,
+    sourceMap: true,
+    style: {
+      trim: true,
+    },
+    template: {
+      isProduction: true,
+      optimizeSSR: true,
+    },
     css: true,
   }),
   babel(),
@@ -64,15 +71,25 @@ configMin.plugins.push(
 )
 
 
-
 let configPart = baseConfig()
 configPart.input = 'src/index.js'
 configPart.output.file = 'dist/vue-upload-component.part.js'
 configPart.output.name = 'VueUploadComponent'
 configPart.plugins.push(
+  pluginCSS({
+    include: '**/*.css?*',
+    output: 'dist/vue-upload-component.part.css',
+  }),
   vue({
-    autoStyles: false,
+    sourceMap: true,
-    css: 'dist/vue-upload-component.part.css',
+    style: {
+      trim: true,
+    },
+    template: {
+      isProduction: true,
+      optimizeSSR: true,
+    },
+    css: false,
   }),
   babel()
 )

webpack.config.js

@@ -6,6 +6,7 @@ const packageInfo       = require('./package')
 
 const bodyParser       = require('webpack-body-parser')
 const chunkUpload      = require('./src/utils/chunkUpload')
+const { VueLoaderPlugin } =  require('vue-loader')
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
@@ -13,6 +14,7 @@ const isDev = process.env.NODE_ENV === 'development'
 
 function baseConfig() {
   let config = {
+    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
     output: {
       path: path.join(__dirname, 'dist'),
       publicPath: '/dist',
@@ -95,6 +97,36 @@ function baseConfig() {
             },
           ]
         },
+        {
+          test: /\.css$/,
+          use: [
+            {
+              loader: 'vue-style-loader',
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                minimize: !isDev,
+              },
+            },
+          ]
+        },
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: 'vue-loader',
+              options: {
+                preserveWhitespace: false,
+                cssModules: {
+                  localIdentName: '[hash:base64:8]',
+                  camelCase: true,
+                },
+              },
+            },
+          ],
+        },
+        /*
         {
           test: /\.vue$/,
           use: [
@@ -139,11 +171,13 @@ function baseConfig() {
             },
           ]
         }
+        */
       ]
     },
 
     plugins: [
       new webpack.BannerPlugin(`Name: ${packageInfo.name}\nVersion: ${packageInfo.version}\nAuthor: ${packageInfo.author}`),
+      new VueLoaderPlugin(),
     ],
     devtool: isDev ? 'eval-source-map' : 'source-map'
   }