[*] update view configuration

pwcong · Feb 9, 2019 · 8ff8a77 · 8ff8a77
1 parent fff1ac4
commit 8ff8a77
Show file tree

Hide file tree

Showing 7 changed files with 6,946 additions and 87 deletions.
diff --git a/view/.babelrc b/view/.babelrc
@@ -1,12 +1,30 @@
 {
-  "presets": ["env", "stage-1"],
+  "presets": ["@babel/env"],
   "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
     [
-      "component",
+      "@babel/plugin-proposal-decorators",
       {
-        "libraryName": "element-ui",
-        "styleLibraryName": "theme-chalk"
+        "legacy": true
       }
-    ]
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-proposal-pipeline-operator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-do-expressions"
   ]
 }
diff --git a/view/package.json b/view/package.json
@@ -4,49 +4,63 @@
   "description": "FrontEnd of IMG Hosting System.",
   "main": "./src/app.js",
   "scripts": {
-    "clean": "rimraf ./dist",
-    "dev": "npm run clean & webpack-dev-server --open",
-    "build": "npm run clean & cross-env NODE_ENV=production webpack --progress"
+    "dev": "webpack-dev-server --open",
+    "build": "cross-env NODE_ENV=production webpack --progress"
   },
   "keywords": [
     "Vue"
   ],
   "author": "[email protected]",
   "license": "ISC",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-component": "^1.1.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-1": "^6.24.1",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.30.1",
-    "node-sass": "^4.5.3",
-    "postcss-cssnext": "^3.0.2",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "url-loader": "^1.0.1",
-    "vue-loader": "^13.3.0",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.9.3"
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^1.0.1",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.9.0",
+    "postcss-loader": "^2.1.5",
+    "postcss-preset-env": "^6.2.0",
+    "sass-loader": "^7.0.1",
+    "url-loader": "^1.1.2",
+    "vue-loader": "^15.2.1",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.4",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "axios": "^0.17.0",
+    "axios": "^0.18.0",
     "chance": "^1.0.13",
     "clipboard": "^2.0.0",
-    "cross-env": "^5.1.0",
-    "element-ui": "^2.2.2",
+    "cross-env": "^5.2.0",
+    "dayjs": "^1.8.5",
+    "element-ui": "^2.5.4",
     "js-cookie": "^2.2.0",
     "marked": "^0.3.17",
-    "moment": "^2.21.0",
     "normalize.css": "^8.0.0",
-    "rimraf": "^2.6.2",
-    "vue": "^2.5.3",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.0"
+    "vue": "^2.6.4",
+    "vue-router": "^3.0.2",
+    "vuex": "^3.1.0"
   }
 }
diff --git a/view/src/app.js b/view/src/app.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 
 import { Message, MessageBox, Icon, Pagination, Card, Dialog } from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 
 Vue.use(Icon);
 Vue.use(Pagination);

diff --git a/view/index.ejs → view/src/index.ejs b/view/index.ejs → view/src/index.ejs
diff --git a/view/src/pages/List.vue b/view/src/pages/List.vue
@@ -143,7 +143,7 @@
 </style>
 <script>
 import Cookies from 'js-cookie';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import { removeImage } from '@/network/api/img';
 
@@ -243,7 +243,7 @@ export default {
       return this.$store.getters.imgList.map(img => ({
         ...img,
         url: BASE_API + img.url,
-        created_at: moment(img.created_at).format('YYYY-MM-DD')
+        created_at: dayjs(img.created_at).format('YYYY-MM-DD')
       }));
     }
   },

diff --git a/view/webpack.config.js b/view/webpack.config.js
@@ -1,48 +1,60 @@
 const path = require('path');
 const webpack = require('webpack');
 
+const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const isProd = process.env.NODE_ENV === 'production';
+const distPath = path.resolve(__dirname, 'dist');
+
+const commonCssLoaders = [
+  isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
+  {
+    loader: 'css-loader',
+    options: { importLoaders: 1 }
+  },
+  {
+    loader: 'postcss-loader',
+    options: {
+      plugins: [require('postcss-preset-env')()]
+    }
+  }
+];
 
 module.exports = {
+  mode: isProd ? 'production' : 'development',
   entry: {
     index: './src/app.js',
-    vendor: ['babel-polyfill', 'vue', 'vuex', 'vue-router', 'axios']
+    vendors: ['@babel/polyfill', 'vue', 'vuex', 'vue-router', 'axios']
   },
   output: {
-    path: path.resolve(__dirname, './dist'),
+    path: distPath,
     filename: 'js/[name].[hash].js'
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          presets: ['env', 'stage-1']
-        }
+        loader: 'babel-loader'
       },
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          postcss: [require('postcss-cssnext')],
-          extractCSS: true,
-          esModule: true
-        }
+        loader: 'vue-loader'
       },
       {
         test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        use: [...commonCssLoaders, 'sass-loader']
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader']
+        use: commonCssLoaders
       },
       {
         test: /\.(woff|eot|ttf)\??.*$/,
-        use: ['url-loader']
+        loader: 'url-loader'
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
@@ -56,54 +68,39 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      vue$: 'vue/dist/vue.esm.js',
       '@': path.join(__dirname, 'src')
     }
   },
-  devtool: 'inline-source-map',
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all'
+        }
+      }
+    }
+  },
+  devtool: 'source-map',
   devServer: {
     historyApiFallback: true,
     port: 3000,
     contentBase: ['./'],
     inline: true,
-    publicPath: '/'
+    publicPath: '/',
+    hot: true
   },
   plugins: [
+    new CleanWebpackPlugin(distPath),
+    new VueLoaderPlugin(),
     new HTMLWebpackPlugin({
       title: 'IMG HOSTING - 简单而实用的图库系统',
-      template: 'index.ejs',
-      minify: {
-        collapseWhitespace: true
-      }
+      template: 'src/index.ejs'
     }),
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: 'css/[name].[hash].css',
       allChunks: true
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      filename: 'js/vendor.js'
     })
-  ]
+  ].concat(isProd ? [] : [new webpack.HotModuleReplacementPlugin()])
 };
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = 'source-map';
-
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('production')
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ]);
-}