一些项目依赖package.json
{
"name": "frontend",
"description": "tssp based on vue2.0 frame",
"version": "1.0.0",
"author": "tom.h@vipshop.com",
"private": true,
"scripts": {
"dev": "et -c element-variables.scss -o element-ui && cross-env NODE_ENV=development webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config config/webpack.tssp.config.js",
"uattest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=uat webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"pretest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=pre webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"sittest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=sit webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"build": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config config/webpack.tssp.config.js"
},
"dependencies": {
"axios": "^0.17.1",
"babel-polyfill": "6.23.0",
"echarts": "^4.1.0",
"font-awesome": "^4.7.0",
"qs": "^6.5.1",
"vue": "2.5.0",
"vue-progressbar": "^0.7.2",
"vue-router": "2.3.1",
"vuebar": "0.0.4",
"vuex": "2.2.1"
},
"babel": {
"presets": [
"es2015",
"stage-3"
],
"ignore": [
"./static/particles.js",
"./static/jsencrypt.min.js"
]
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-3": "^6.22.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.2.4",
"css-loader": "^0.27.3",
"element-theme": "^2.0.1",
"element-theme-chalk": "git+https://github.com/ElementUI/theme-chalk.git",
"element-theme-default": "1.3.6",
"element-ui": "^2.4",
"express": "^4.16.2",
"express-proxy-mock": "^1.2.13",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"gulp": "^3.9.1",
"gulp-git": "^2.2.0",
"gulp-util": "^3.0.8",
"html-webpack-plugin": "^2.28.0",
"js-cookie": "^2.2.0",
"node-sass": "^4.5.0",
"postcss-css-variables": "0.7.0",
"postcss-cssnext": "2.10.0",
"postcss-import": "9.1.0",
"postcss-loader": "1.3.3",
"rimraf": "2.6.2",
"sass-loader": "^5.0.1",
"sass-resources-loader": "^1.3.1",
"vue-lazy-render": "^1.0.20",
"vue-loader": "11.3.4",
"vue-style-loader": "2.0.5",
"vue-template-compiler": "2.5.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^2.6.1"
}
}
一些打包脚本
"scripts": {
"dev": "et -c element-variables.scss -o element-ui && cross-env NODE_ENV=development webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config config/webpack.tssp.config.js",
"uattest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=uat webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"pretest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=pre webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"sittest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=sit webpack --progress --hide-modules --config config/webpack.tssp.config.js",
"build": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config config/webpack.tssp.config.js"
},
script解读：
et -c element-variables.scss -o element-ui 打包本地配置好的elementUI样式
cross-env NODE_ENV=development 将环境变量改成不同的值，对应不同模式的打包
webpack --progress --hide-modules --config config/webpack.tssp.config.js 根据config文件夹中的webpack.tssp.config.js配置打包文件，显示进度
webpack-dev-server --inline --hot --config config/webpack.tssp.config.js 启动webpack服务，开启热更新
babel解读：
"babel": {
"presets": [
"es2015",
"stage-3"
],
"ignore": [
"./static/particles.js",
"./static/jsencrypt.min.js"
]
},
"presets": [ "es2015", "stage-3"] 将代码打包成es2015和stage-3 "ignore": ["./static/particles.js","./static/jsencrypt.min.js"] 忽略转义某些文件，一些库的脚本转义后会报错，故用之
webpack配置
webpack.tssp.config.js
const path = require('path');
const webpack = require('webpack');
const cssnext = require('postcss-cssnext');
const atImport = require('postcss-import');
const cssvariables = require('postcss-css-variables');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const devSrc = 'http://localhost:8099/static/';
const devOutputPath = '../dist/static';
const prodSrc = './static/';
const prodOutputPath = '../dist/static';
const Util = require('./util')
const PATH_DIST = {
font: 'font/',
img: 'image/',
css: 'css/',
js: 'js/',
root:'../'
};
const isProduction = process.env.NODE_ENV !== 'development'; //环境，dev、production
const BASE_API_MAP = {
"development": '""',
"uat": '"http://11.114.0.12:8050/nfsm-uat/"',
"sit": '"http://11.114.0.12:8050/nfsm-sit/"',
"pre": '"http://11.111.1.5:8050/nfsm-pre/"',
"production": '"http://22.231.1.5:10080/nfsm/"'
}
const UPLOADFILE_MAP = {
"development": '"http://11.114.0.12:8050/nfsm-sit/"',
"uat": '"http://11.114.0.12:8050/nfs-uat"',
"sit": '"http://11.114.0.12:8050/nfs-sit"',
"pre": '"http://11.111.1.5:8050/nfs-pre"',
"production": '"http://22.231.1.5:10080/nfs"'
}
const proxyHost = 'http://11.114.0.12:8050/nfsm-sit/';
const host = isProduction ? prodSrc : devSrc;
const outputPath = isProduction ? prodOutputPath : devOutputPath;
const extractElementUI = new ExtractTextPlugin(PATH_DIST.css + 'element.css' + (isProduction ? '?[contenthash:8]' : ''));
const extractCSS = new ExtractTextPlugin(PATH_DIST.css + 'app.css' + (isProduction ? '?[contenthash:8]' : ''));
module.exports = function (env) {
let Config = {
entry: {
element: ['element-ui'],
vue: ['vue', 'axios', 'vue-router', 'vuex'],
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, outputPath),
publicPath: host,
filename: PATH_DIST.js + '[name].js' + (isProduction ? '?[chunkhash:8]' : '')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: Util.generateSassResourceLoader(),
sass: Util.generateSassResourceLoader(),
css: extractCSS.extract({
use: 'css-loader!postcss-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test: function (path) {
if (/\.css$/.test(path) && (/element-ui/).test(path)) {
console.log(path)
return true;
} else {
return false;
}
},
loader: extractElementUI.extract({
use: 'css-loader!postcss-loader'
})
},
{
test: function (path) {
if (/\.css$/.test(path) && !(/element-ui/).test(path)) {
return true;
} else {
return false;
}
},
loader: extractCSS.extract({
use: 'css-loader!postcss-loader'
})
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(woff|svg|eot|ttf)\??.*$/, //字体文件
loader: 'file-loader',
options: {
publicPath: '../font/',
outputPath: PATH_DIST.font,
name: '[name].[ext]'
}
},
{
test: /\.(gif|jpg|png|ico)\??.*$/, //图片
loader: 'file-loader',
options: {
name: PATH_DIST.img + '[name].[ext]'
}
},
{
test: /\.scss$/,
use: Util.generateSassResourceLoader()
},
{
test: /\.sass/,
use: Util.generateSassResourceLoader()
},
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['element', 'vue']
}),
extractElementUI,
extractCSS,
// copy custom static assets
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: '',
ignore: ['.*']
}]),
new webpack.LoaderOptionsPlugin({
options: {
postcss: function () {
return [atImport({
path: [path.resolve(__dirname, '../src')]
}), cssnext, cssvariables];
}
},
minimize: isProduction
}),
new HtmlWebpackPlugin({
title: '消息推送平台',
template: 'index.html',
filename: '../index.html',
inject: false,
path: host,
chunks: ['element', 'vue', 'app']
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
'process.env.BASE_API': BASE_API_MAP[process.env.NODE_ENV],
'process.env.UPLOADFILE': UPLOADFILE_MAP[process.env.NODE_ENV]
}),
],
performance: {
hints: isProduction ? 'warning' : false
},
devtool: isProduction ? false : '#eval-source-map',
resolve: {
alias: {
'src': path.resolve(__dirname, '../src'),
'@': path.resolve(__dirname, '../src'),
'lib': path.resolve(__dirname, '../static'),
'scss': path.resolve(__dirname, '../src/scss/')
},
extensions:[".js"]
}
};
if (isProduction) {
Config.plugins = Config.plugins.concat([
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
})
]);
} else {
let context = ['/auth', '/myAccount', '/user', '/role', '/resource', '/task', '/enum', '/draft', '/customerLabel','/accessChannel']
Config.devServer = {
historyApiFallback: true,
publicPath: '/static/',
disableHostCheck: true,
noInfo: true,
hot: true,
host: 'localhost',
proxy: [{
context: context,
//target: 'http://11.112.0.100:9750',
target: proxyHost,
changeOrigin: true,
secure: false
}/* , {
context: '/file',
target: 'http://11.112.0.100:9742',
changeOrigin: true,
secure: false
} */],
port: 8099,
watchOptions: {
poll: false,
ignored: ['node_modules/**', 'config/**', 'common/**', 'dist/**']
},
headers: {
'Access-Control-Allow-Origin': '*'
}
};
}
return Config;
};