打包

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "node scripts/server.js",
-    "build": "node scripts/build.js"
+    "build": "node scripts/prod.js"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
@@ -14,6 +14,7 @@
     "autoprefixer": "^9.7.2",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "chalk": "^3.0.0",
     "connect-history-api-fallback": "^1.6.0",
     "css-loader": "^3.2.0",
@@ -28,14 +29,20 @@
     "fibers": "^4.0.2",
     "file-loader": "^5.0.2",
     "friendly-errors-webpack-plugin": "^1.7.0",
+    "fs-extra": "^8.1.0",
+    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "ip": "^1.1.5",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.13.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "ora": "^4.0.3",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
+    "terser-webpack-plugin": "^2.2.1",
     "vue-eslint-parser": "^7.0.0",
     "vue-loader": "^15.7.2",
     "vue-template-compiler": "^2.6.10",

scripts/build.js

@@ -0,0 +1,47 @@
+
+const path = require('path')
+const fs = require('fs-extra')
+const ora = require('ora')
+const chalk = require('chalk')
+const webpack = require('webpack')
+
+module.exports = (env, config) => {
+  const spinner = ora(`Building for ${env}...`)
+  spinner.start()
+  fs.emptyDirSync(path.resolve(__dirname, '../dist'))
+
+  const compiler = webpack(config)
+  compiler.run((err, stats) => {
+    spinner.stop()
+
+    if (err) {
+      console.error(err.stack || err)
+      if (err.details) {
+        console.error(err.details)
+      }
+      return
+    }
+
+    process.stdout.write(
+      stats.toString({
+        children: false,
+        chunks: false,
+        colors: true,
+        modules: false,
+        chunkModules: false,
+        hash: false,
+      }) +
+      '\n\n',
+    )
+
+    if (stats.hasErrors()) {
+      return console.log(chalk.white.bgRed('Build failed.\n'))
+    }
+
+    // if (stats.hasWarnings()) {
+    //   return console.log(chalk.white.bgGreenBright(
+    //     'Build success, but with warnings.\n'))
+    // }
+    console.log(chalk.white.bgGreen('Build success.\n'))
+  })
+}

scripts/config.js

@@ -13,4 +13,13 @@ module.exports = {
       },
     },
   },
+  prod: {
+    publicPath: '/',
+    env: {
+      NODE_ENV: '"prod"',
+      API_URL: {
+        default: '"https://api.uptoyo.com/trace"',
+      },
+    },
+  },
 }

scripts/prod.js

@@ -0,0 +1,4 @@
+
+const config = require('./webpack/prod.js')
+
+require('./build')('prod', config)

scripts/webpack/dev.js

@@ -7,6 +7,7 @@ const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const config = require('../config')
 const clientOptions = '?path=/__what&timeout=5000&reload=true&quiet=true'
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 
 module.exports = {
   mode: 'development',
@@ -56,8 +57,8 @@ module.exports = {
         loader: 'file-loader',
       },
       {
-        test: /\.(mp4|mp3)$/i,
-        loader: 'file-loader',
+        test: /\.(html)$/i,
+        loader: 'html-loader',
       },
       {
         test: /\.js$/,
@@ -97,6 +98,7 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env': config.dev.env,
     }),
+    new CaseSensitivePathsPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new FriendlyErrorsWebpackPlugin({
       compilationSuccessInfo: {

scripts/webpack/prod.js

@@ -0,0 +1,136 @@
+
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const config = require('../config')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+
+module.exports = {
+  mode: 'production',
+  entry: path.resolve(__dirname, '../../src/index.js'),
+  output: {
+    path: path.resolve(__dirname, '../../dist'),
+    filename: 'assets/scripts/[name].[chunkhash:8].js',
+    publicPath: config.prod.publicPath,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            },
+          },
+          'postcss-loader',
+        ],
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2,
+            },
+          },
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        loader: 'file-loader',
+        options: {
+          name: 'assets/images/[name].[contenthash:8].[ext]',
+        },
+      },
+      {
+        test: /\.js$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        loader: 'eslint-loader',
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          parse: {
+            ecma: 8,
+          },
+          compress: {
+            drop_console: true,
+          },
+          mangle: {
+            safari10: true,
+          },
+        },
+        cache: true,
+        parallel: true,
+      }),
+      new OptimizeCSSAssetsPlugin(),
+    ],
+    splitChunks: {
+      chunks: 'all',
+      maxSize: 224000,
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+        },
+      },
+    },
+  },
+  externals: {
+    vue: 'Vue',
+  },
+  resolve: {
+    extensions: [
+      '.js',
+      '.vue',
+    ],
+    alias: {
+      '@': path.resolve(__dirname, '../../src'),
+    },
+  },
+  devtool: 'inline-source-map',
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: config.template,
+      inject: true,
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+      },
+    }),
+    new VueLoaderPlugin(),
+    new webpack.HashedModuleIdsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': config.prod.env,
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'assets/styles/[name].[contenthash:8].css',
+      chunkFilename: 'assets/styles/[name].[contenthash:8].chunk.css',
+    }),
+  ],
+}

src/components/App.vue

@@ -56,6 +56,7 @@ export default {
   },
   methods: {
     go (name) {
+      if (this.$route.name === name) return
       this.$router.push({ name })
     },
     open (link) {

src/components/Buy.vue

@@ -1,16 +1,8 @@
 <template>
   <div class="buy">
-    <video
-      ref="video"
-      class="video"
-      src="~@/assets/medias/video.mp4"
-      preload="auto"
-      playsinline="true"
-      webkit-playsinline="true"
-      x5-playsinline="true"
-      x5-video-player-type="h5"
-      x5-video-player-fullscreen="true"
-      x-webkit-airplay="true" />
+    <CommonVideo
+      video="http://vod.uptoyo.com/sv/4f43fa8f-16ecc77e6a4/4f43fa8f-16ecc77e6a4.mp4"
+      :size="{ width: '100%', height: '3.6rem' }" />
     <div class="common__title common__title--6" />
     <div class="content">
       <div>
@@ -31,8 +23,12 @@
 </template>
 
 <script>
+import CommonVideo from '@/components/common/video'
 export default {
   props: ['trace'],
+  components: {
+    CommonVideo,
+  },
 }
 </script>
 
@@ -51,13 +47,6 @@ export default {
   }
 }
 
-.video {
-  display: block;
-  width: 100%;
-  height: 3.6rem;
-  background: #d1d1d1;
-}
-
 .content {
   padding: .5rem 0 1rem;
   color: #666;

src/components/Home.vue

@@ -84,7 +84,7 @@
           </div>
           <p
             class="trace__content"
-            @click="$listeners.open(`https://eosflare.io/tx/${trace.trans_id}`)">
+            @click="$listeners.open(`https://bloks.io/transaction/${trace.trans_id}`)">
             {{trace.trans_id}}
           </p>
         </div>