参考了几位同行的Blogs和StackOverflow上的许多问答，在原来的ng1加TypeScript以及Webpack的经验基础上，搭建了该项目，核心文件如下，供需要的人参考。
package.json
1 { 2 "name": "app", 3 "version": "1.0.0", 4 "description": "App package.json from the documentation, supplemented with testing support", 5 "author": "", 6 "private": true, 7 "scripts": { 8 "dev": "webpack-dev-server -d --inline --hot --env.dev", 9 "build": "rimraf dist && webpack --progress --hide-modules" 10 }, 11 "dependencies": { 12 "axios": "^0.18.0", 13 "bootstrap": "^4.0.0", 14 "bootstrap-vue": "^2.0.0-rc.2", 15 "element-ui": "^2.2.2", 16 "font-awesome": "^4.7.0", 17 "jointjs": "^2.0.1", 18 "jquery": "^3.3.1", 19 "js-md5": "^0.7.3", 20 "layui-src": "^2.2.5", 21 "linq": "^3.0.9", 22 "lodash": "^4.17.5", 23 "pdfmake": "^0.1.36", 24 "popper.js": "^1.14.1", 25 "tinymce": "^4.7.12", 26 "uuid": "^3.2.1", 27 "vue": "^2.5.16", 28 "vue-class-component": "^6.2.0", 29 "vue-echarts-v3": "^1.0.19", 30 "vue-i18n": "^7.6.0", 31 "vue-i18n-extensions": "^0.1.0", 32 "vue-lazyload": "^1.2.3", 33 "vue-pdf": "^3.3.1", 34 "vue-property-decorator": "^6.0.0", 35 "vue-router": "^3.0.1", 36 "vue-socket.io": "^2.1.1-b", 37 "vue-tinymce": "github:lpreterite/vue-tinymce", 38 "vue-video-player": "^5.0.2", 39 "vuex": "^3.0.1", 40 "vuex-class": "^0.3.0" 41 }, 42 "engines": { 43 "node": ">=6.0.0", 44 "npm": ">= 3.0.0" 45 }, 46 "browserslist": [ 47 "> 1%", 48 "last 2 versions", 49 "not ie <= 8" 50 ], 51 "devDependencies": { 52 "@kazupon/vue-i18n-loader": "^0.3.0", 53 "@types/lodash": "^4.14.106", 54 "ajv": "^6.3.0", 55 "autoprefixer": "^8.2.0", 56 "babel-core": "^6.26.3", 57 "babel-helper-vue-jsx-merge-props": "^2.0.3", 58 "babel-loader": "^7.1.4", 59 "babel-plugin-syntax-dynamic-import": "^6.18.0", 60 "babel-plugin-syntax-jsx": "^6.18.0", 61 "babel-plugin-transform-vue-jsx": "^3.7.0", 62 "babel-preset-env": "^1.6.1", 63 "bootstrap-loader": "^2.2.0", 64 "clean-webpack-plugin": "^0.1.19", 65 "compression-webpack-plugin": "^1.1.11", 66 "copy-webpack-plugin": "^4.5.1", 67 "css-loader": "^0.28.11", 68 "cssnano": "^3.10.0", 69 "extract-text-webpack-plugin": "^3.0.2", 70 "file-loader": "^1.1.11", 71 "html-loader": "^0.5.5", 72 "html-webpack-plugin": "^3.1.0", 73 "image-webpack-loader": "^4.2.0", 74 "json-loader": "^0.5.7", 75 "node-sass": "^4.7.2", 76 "optimize-css-assets-webpack-plugin": "^3.2.0", 77 "postcss-import": "^11.1.0", 78 "postcss-loader": "^2.1.3", 79 "postcss-url": "^7.3.2", 80 "resolve-url-loader": "^2.3.0", 81 "rimraf": "^2.6.2", 82 "sass-loader": "^6.0.7", 83 "sass-resources-loader": "^1.3.3", 84 "style-loader": "^0.20.3", 85 "ts-loader": "^3.1.1", 86 "tslint": "^5.9.1", 87 "tslint-config-standard": "^7.0.0", 88 "tslint-loader": "^3.6.0", 89 "typescript": "^2.8.3", 90 "uglifyjs-webpack-plugin": "^1.2.5", 91 "url-loader": "^1.0.1", 92 "vue-loader": "^14.2.1", 93 "vue-style-loader": "^4.1.0", 94 "vue-template-compiler": "^2.5.16", 95 "webpack": "^3.1.0", 96 "webpack-dev-server": "^2.9.4", 97 "webpack-parallel-uglify-plugin": "^1.1.0" 98 } 99 }
webpack.config.js
1 const {resolve} = require(‘path‘); 2 const webpack = require(‘webpack‘); 3 const CopyWebpackPlugin = require(‘copy-webpack-plugin‘); 4 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); 5 const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘); 6 const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘); 7 const ParallelUglifyPlugin=require(‘webpack-parallel-uglify-plugin‘) ; 8 const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘); 9 const CleanWebpackPlugin = require(‘clean-webpack-plugin‘); 10 const url = require(‘url‘); 11 const publicPath = ‘/public/‘; 12 13 function getVueStyleLoader(isDev) { 14 if (!isDev) { 15 return ExtractTextPlugin.extract({ 16 fallback: "vue-style-loader", 17 use: ["css-loader", "postcss-loader", "sass-loader", 18 "sass-resources-loader?resources=./src/common/style/sass-resources.scss"] 19 }); 20 } 21 return "vue-style-loader!css-loader?sourceMap!postcss-loader?sourceMap!sass-loader?sourceMap!sass-resources-loader?resources=./src/common/style/sass-resources.scss"; 22 } 23 24 function getCssLoader(isDev) { 25 if (!isDev) { 26 return ExtractTextPlugin.extract({ 27 fallback: "style-loader", 28 use: ["css-loader", "postcss-loader"] 29 }); 30 } 31 return [ 32 {loader: ‘style-loader‘},