build: upgrade webpack and vue-loader

Author: PeachScript

karma.conf.js

@@ -24,7 +24,7 @@ module.exports = function(config) {
     },
     webpack: webpackConfig,
     webpackMiddleware: {
-      noInfo: true
+      stats: 'errors-only'
     },
     singleRun: true
   });

package.json

@@ -40,7 +40,7 @@
   "devDependencies": {
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",
-    "autoprefixer": "^7.1.2",
+    "autoprefixer": "^9.1.5",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.1.1",
     "babel-plugin-istanbul": "^4.1.4",
@@ -55,7 +55,7 @@
     "eslint-loader": "^2.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-vue": "^4.7.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "karma": "^3.0.0",
     "karma-chai": "^0.1.0",
@@ -64,20 +64,20 @@
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sinon-chai": "^1.3.1",
     "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^2.0.4",
+    "karma-webpack": "^4.0.0-rc.2",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
     "mocha": "^5.2.0",
     "phantomjs-prebuilt": "^2.1.15",
+    "postcss-loader": "^3.0.0",
     "sinon": "^2.4.1",
     "sinon-chai": "^2.13.0",
-    "style-loader": "^0.18.2",
-    "uglifyjs-webpack-plugin": "^0.4.6",
-    "vue": "^2.2.0",
-    "vue-loader": "^13.0.4",
-    "vue-template-compiler": "^2.4.2",
-    "webpack": "^3.5.4",
-    "webpack-dev-server": "^2.7.1"
+    "vue": "^2.5.17",
+    "vue-loader": "^15.4.1",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.17.2",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.8"
   },
   "peerDependencies": {
     "vue": "^2.2.0"

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
@@ -16,7 +17,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue'],
     alias: {
-      'vue$': 'vue/dist/vue.min.js'
+      vue$: 'vue/dist/vue.min.js'
     }
   },
   module: {
@@ -37,13 +38,36 @@ module.exports = {
       },
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          postcss: [require('autoprefixer')]
-        }
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.less$/,
+        use: [
+          'vue-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: [
+                require('autoprefixer')
+              ]
+            }
+          },
+          'less-loader'
+        ]
       }
     ]
-  }
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ],
+  mode: process.env.NODE_ENV || 'development'
 };
 
 if (process.env.NODE_ENV === 'production') {
@@ -55,18 +79,12 @@ if (process.env.NODE_ENV === 'production') {
     `${pkg.license} License`
   ].join('\n');
 
-  module.exports.plugins = [
-    new webpack.BannerPlugin(banner)
-  ];
+  module.exports.plugins.push(new webpack.BannerPlugin(banner));
 } else {
   // development configurations
-  module.exports.plugins = [
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: './example/index.html',
-      inject: false
-    })
-  ];
-
-  module.exports.devtool = '#cheap-module-eval-source-map';
+  module.exports.plugins.push(new HtmlWebpackPlugin({
+    filename: 'index.html',
+    template: './example/index.html',
+    inject: false
+  }));
 }