build: 优化打包配置

Author: mathink12

docs-src/.vuepress/config.js

@@ -15,5 +15,14 @@ module.exports = {
     config.resolve.alias
       .set('@', resolve('src'))
       .set('@lib', resolve('dist'))
+
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
+      .tap(options => {
+        options.compilerOptions.preserveWhitespace = false
+        return options
+      })
   }
 }

package-lock.json

@@ -2,9 +2,9 @@
   "name": "json-tree",
   "version": "1.0.0",
   "description": "JSON tree view for Vue",
-  "main": ".eslintrc.js",
+  "main": "lib/JsonTree.common.js",
   "scripts": {
-    "lib": "vue-cli-service build --target lib --name JsonTree --dest dist src/index.js",
+    "lib": "vue-cli-service build --target lib --name JsonTree --dest lib src/index.js",
     "publish": "npm run lib && npm publish --registry https://www.npmjs.com/",
     "docs": "vuepress dev docs-src"
   },
@@ -43,6 +43,7 @@
     "lint-staged": "^10.5.1",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "vue": "^2.6.12",
     "vue-template-compiler": "^2.6.12",
     "vuepress": "^1.7.1"

package.json

@@ -1,6 +1,7 @@
-const path = require('path')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+// const path = require('path')
 
-const resolve = dir => path.join(__dirname, '.', dir)
+// const resolve = dir => path.join(__dirname, '.', dir)
 
 module.exports = {
   // 修改 src 目录 为 examples 目录
@@ -11,20 +12,32 @@ module.exports = {
       filename: 'index.html'
     }
   },
+  configureWebpack: config => {
+    if (process.env.NODE_ENV === 'production') {
+      config.optimization.minimizer.push(
+        new UglifyJsPlugin({
+          uglifyOptions: {
+            warnings: false,
+            compress: {
+              drop_debugger: true,
+              drop_console: true
+            }
+          },
+          sourceMap: true,
+          parallel: true
+        })
+      )
+    }
+  },
   chainWebpack: config => {
-    // config.resolve.alias
-    //   .set('@', resolve('examples'))
-    //   .set('@lib', resolve('dist'))
-
     config.module
-      .rule('js')
-      .include
-      .add(resolve('src'))
-      .end()
-      .use('babel')
-      .loader('babel-loader')
+      // vue-template-compiler 去掉标签之间的空格
+      // https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-template-compiler/README.md#%E9%80%89%E9%A1%B9
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
       .tap(options => {
-        // 修改它的选项...
+        options.compilerOptions.preserveWhitespace = false
         return options
       })