refactor: refine build scripts

sb-im · Jun 30, 2019 · c105ec4 · c105ec4
1 parent c5491cf
commit c105ec4
Show file tree

Hide file tree

Showing 9 changed files with 406 additions and 177 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.travis.yml b/.travis.yml
@@ -14,9 +14,10 @@ script:
 
 before_deploy:
   - ls
-  - ls | grep -v "`cat Deploylist`" | xargs rm -r
-  - rm .editorconfig .eslintrc.js .gitignore
+  - mv {assets,dist} /tmp/
+  - rm -rf {*,.*}
   - wget https://raw.githubusercontent.com/SB-IM/SDWC/gh-pages/config.json
+  - cp /tmp/{assets,dist}/* .
   - ls -a
 
 
@@ -25,7 +26,7 @@ deploy:
   fqdn: test.newbe.cc
   skip-cleanup: true
   github-token: $GITHUB_TOKEN
-  keep-history: true
+  keep-history: false
   on:
     branch: dev
 
diff --git a/Deploylist b/Deploylist
diff --git a/robots.txt → assets/robots.txt b/robots.txt → assets/robots.txt
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
   "license": "MPL-2.0",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --env development",
-    "build": "webpack --env production",
+    "dev": "webpack-dev-server --config scripts/webpack.config.js --env development",
+    "build": "webpack --config scripts/webpack.config.js --env production",
     "client": "nwbuild -p $P client",
     "cdev": "nwbuild -v 0.30.0 -p linux64 -r client",
     "test": "eslint src --ext .vue && eslint src"
@@ -16,7 +16,7 @@
     "chartist": "^0.11.2",
     "chartist-plugin-tooltips": "^0.0.17",
     "content-disposition": "^0.5.3",
-    "element-ui": "^2.9.1",
+    "element-ui": "^2.10.0",
     "fetch-jsonp": "^1.1.3",
     "flv.js": "^1.4.0",
     "hls.js": "^0.12.4",
@@ -35,22 +35,23 @@
     "@babel/preset-env": "^7.4.5",
     "@types/amap-js-sdk": "^1.4.1",
     "@types/chartist": "^0.9.46",
-    "@types/googlemaps": "^3.36.4",
+    "@types/googlemaps": "^3.36.5",
     "@types/hls.js": "^0.12.4",
     "babel-loader": "^8.0.6",
     "babel-plugin-component": "^1.1.1",
     "css-loader": "^3.0.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.2.2",
+    "eslint": "^6.0.1",
+    "eslint-plugin-vue": "^5.2.3",
     "file-loader": "^4.0.0",
+    "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.7.0",
     "nw-builder": "^3.5.7",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "style-loader": "^0.23.1",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.34.0",
-    "webpack-cli": "^3.3.4",
-    "webpack-dev-server": "^3.7.1"
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "^3.7.2"
   }
 }
diff --git a/webpack.config.js → scripts/webpack.config.js b/webpack.config.js → scripts/webpack.config.js
@@ -2,6 +2,7 @@
 
 const path = require('path');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
@@ -10,11 +11,13 @@ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  */
 const cfg = {
   mode: 'development',
-  entry: './src/main.js',
+  context: path.resolve(__dirname, '../src'),
+  entry: {
+    main: path.resolve(__dirname, '../src/main.js'),
+  },
   output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'build.js'
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name].[hash].js'
   },
   module: {
     rules: [
@@ -29,31 +32,52 @@ const cfg = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          compilerOptions: { preserveWhitespace: false }
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
       {
         test: /\.js$/,
+        exclude: /node_modules/,
         loader: 'babel-loader',
-        exclude: /node_modules/
+        options: {
+          presets: [
+            ['@babel/preset-env', { targets: { chrome: 64, firefox: 58, edge: 15, safari: 11 } }]
+          ],
+          plugins: [
+            ['component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }]
+          ]
+        }
+      },
+      {
+        test: /\.(ttf|eot|woff2?)$/,
+        loader: 'file-loader',
+        options: {
+          name: 'fonts/[name].[ext]'
+        }
       },
       {
-        test: /\.(ttf|eot|woff|png|jpe?g|gif|svg)$/,
+        test: /\.(png|jpe?g|gif|svg)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[ext]'
+          name: 'images/[name].[ext]'
         }
       }
     ]
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'src'),
-      'assets': path.resolve(__dirname, 'assets')
+      '@': path.resolve(__dirname, '../src'),
+      'assets': path.resolve(__dirname, '../assets')
     }
   },
   plugins: [
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      title: 'S Dashboard Web Console'
+    })
   ],
   devServer: {
     hot: true,
@@ -85,7 +109,7 @@ module.exports = function (env, argv) {
       { loader: 'css-loader' }
     ];
     cfg.plugins.push(
-      new MiniCSSExtractPlugin({ filename: 'style.css' }),
+      new MiniCSSExtractPlugin({ filename: 'style.[contenthash].css' }),
       new OptimizeCssAssetsPlugin()
     );
   }

diff --git a/src/main.js b/src/main.js
@@ -19,12 +19,14 @@ import 'chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css';
 store.dispatch('reconfigure');
 store.dispatch('restorePreference');
 
+const el = document.createElement('div');
+document.body.appendChild(el);
 new Vue({
   store,
   i18n,
   router,
   ...App
-}).$mount(document.getElementById('app'));
+}).$mount(el);
 
 window.addEventListener('beforeunload', () => {
   store.dispatch('storePreference');