fix svg

Author: mgbq

package.json

@@ -130,15 +130,15 @@
     "shelljs": "0.7.8",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "svg-sprite-loader": "3.2.1",
+    "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "text-loader": "^0.0.1",
     "uglifyjs-webpack-plugin": "1.1.3",
     "vue-loader": "^15.9.1",
     "vue-runtime-helpers": "^1.1.2",
     "vue-style-loader": "3.0.3",
     "vue-template-compiler": "2.6.10",
-    "webpack": "3.10.0",
+    "webpack": "^4.42.1",
     "webpack-bundle-analyzer": "2.9.1",
     "webpack-dev-server": "2.9.7",
     "webpack-merge": "4.1.1"

vue.config.js

@@ -45,7 +45,7 @@ module.exports = {
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,
   productionSourceMap: false,
   devServer: {
     port: port,
@@ -66,30 +66,22 @@ module.exports = {
     }
   },
   chainWebpack(config) {
+    // set svg-sprite-loader
     config.module
-      .rule('cache-loader')
-      .test(/\.ext$/)
-      .use('cache-loader')
-      .loader('cache-loader')
-      .end()
-
-    config.resolve.alias.set('@$', resolve('src'))
-    const svgRule = config.module.rule('svg')
-    svgRule.uses.clear()
-    svgRule
-      .oneOf('inline')
-      .resourceQuery(/inline/)
-      .use('vue-svg-icon-loader')
-      .loader('vue-svg-icon-loader')
+      .rule('svg')
+      .exclude.add(resolve('src/icons'))
       .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
       .end()
-      .oneOf('external')
-      .use('file-loader')
-      .loader('file-loader')
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
       .options({
-        name: 'assets/[name].[hash:8].[ext]'
+        symbolId: 'icon-[name]'
       })
-
+      .end()
     // set preserveWhitespace
     config.module
       .rule('vue')