upgrade to webpack 4

Author: 陈峰

build/webpack.config.js

@@ -1,9 +1,26 @@
 const path = require('path');
-const webpack = require('webpack')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
+    mode: 'production',
     entry: './lib/index.js',
+    optimization: {
+        minimizer: [
+          new UglifyJsPlugin({
+            cache: true,
+            parallel: true,
+            sourceMap: true,
+            uglifyOptions: {
+              compress: {
+                warnings: false
+              },
+              comments: false
+            }
+          }),
+        ],
+    },
     output: {
         path: path.join(__dirname, '../dist'),
         filename: 'vue-json-viewer.js',
@@ -27,8 +44,8 @@ module.exports = {
                 exclude: /node_modules/
             },
             {
-                test: /\.css$/,
-                use: ['vue-style-loader', 'css-loader', 'autoprefixer-loader']
+                test: /\.s?css$/,
+                use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
             },
             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -55,15 +72,10 @@ module.exports = {
         ]
     },
     plugins: [
-        new webpack.optimize.UglifyJsPlugin({
-            parallel: true,
-            uglifyOptions: {
-                compress: {
-                    warnings: false
-                },
-                comments: false
-            }
-        }),
-        // new BundleAnalyzerPlugin()
+        new VueLoaderPlugin()
     ]
 }
+
+if (process.argv.some(a => a === '--report')) {
+    module.exports.plugins.push(new BundleAnalyzerPlugin());
+}

package.json

@@ -43,11 +43,10 @@
   ],
   "dependencies": {
     "clipboard": "^1.7.1",
-    "vue": "^2.5.2"
+    "vue": "^2.6.9"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.5",
-    "autoprefixer-loader": "^3.2.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.2",
@@ -61,17 +60,20 @@
     "eslint": "^5.6.0",
     "eslint-plugin-vue": "^5.0.0-beta.3",
     "file-loader": "^1.1.5",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.5.3",
+    "postcss-loader": "^3.0.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
+    "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^0.6.2",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.3",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.8.1",
+    "vue-loader": "^15.7.0",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.9",
+    "webpack": "^4.29.6",
     "webpack-bundle-analyzer": "^3.0.2",
-    "webpack-dev-server": "^2.9.2",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "3.1.11",
     "webpack-merge": "^4.1.0"
   }
 }

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  sourceMap: false,
+  plugins: [
+    require('autoprefixer')({
+      browsers: ['> 1%', 'android >=4', 'ios >=8']
+    })
+  ]
+};