1、在build文件夹下新建test.js，内容复制同级目录下的build.js，修改两个地方
1 'use strict' 2 require('./check-versions')() 3 // 修改1 4 process.env.NODE_ENV = 'test' 5 const ora = require('ora') 6 const rm = require('rimraf') 7 const path = require('path') 8 const chalk = require('chalk') 9 const webpack = require('webpack') 10 const config = require('../config') 11 // 修改2 12 const webpackConfig = require('./webpack.test.conf')
2、在build文件夹下新建webpack.test.conf.js，内容复制同级目录下的webpack.prod.conf.js，修改一个地方
1 'use strict' 2 const path = require('path') 3 const utils = require('./utils') 4 const webpack = require('webpack') 5 const config = require('../config') 6 const merge = require('webpack-merge') 7 const baseWebpackConfig = require('./webpack.base.conf') 8 const CopyWebpackPlugin = require('copy-webpack-plugin') 9 const HtmlWebpackPlugin = require('html-webpack-plugin') 10 const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 // 修改 14 const env = require('../config/test.env')
3、在config文件夹下新建test.env.js，内容复制同级目录下的prod.env.js，修改一个地方
注意： 《单引号》《双引号》
1 'use strict' 2 module.exports = { 3 // 修改 4 NODE_ENV: '"test"' 5 }
4、编辑build文件夹下webpack.base.conf.js，修改一个地方
1 output: { 2 path: config.build.assetsRoot, 3 filename: '[name].js', 4 // 修改 5 publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' 6 ? config.build.assetsPublicPath 7 : config.dev.assetsPublicPath 8 }
5、编辑build文件夹下utils.js，修改一个地方
1 exports.assetsPath = function (_path) { 2 // 修改 3 const assetsSubDirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' 4 ? config.build.assetsSubDirectory 5 : config.dev.assetsSubDirectory 6 7 return path.posix.join(assetsSubDirectory, _path) 8 }
6、编辑config文件夹下index.js，修改两个地方
1 build: { 2 // 修改1 3 index: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test/index.html') : path.resolve(__dirname, '../dist/index.html'), // 线上测试环境和线上正式环境入口文件路径区分 4 // 修改2 5 assetsRoot: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test') : path.resolve(__dirname, '../dist'), // 线上测试环境和线上正式环境打包后文件区分 6 assetsSubDirectory: 'static', 7 assetsPublicPath: './', 8 productionSourceMap: true, 9 devtool: '#source-map', 10 // npm install --save-dev compression-webpack-plugin@1.12.0 11 productionGzip: true, 12 productionGzipExtensions: ['js', 'css'], 13 bundleAnalyzerReport: process.env.npm_config_report 14 }
7、编辑package.json文件，修改三处
1 "scripts": { 2 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 3 // 打正式包，打包后文件在dist文件夹下 4 "build:prod": "node build/build.js", 5 // 打测试包，打包后文件在test文件夹下 6 "build:test": "node build/test.js", 7 // 打正式包和测试包 8 "build": "npm run build:prod && npm run build:test" 9 }
8、 打包时运行npm run build即可打测试包和正式包。如果只需要测试包，则执行npm run build:test；如果只需要正式包，则执行npm run build:prod
9、那么，在nginx配置代理的时候，测试服务器应该代理到test/文件夹，正式服务器应该代理到dist/文件夹。 在开发的时候，可以用process.env.NODE_ENV的值来判断运行环境：开发环境development、测试环境test、生产环境production。而不应该通过location.hostname来判断运行环境了。