1、在build文件夾下新建test.js
,內容復制同級目錄下的build.js
,修改兩個地方
'use strict'
require('./check-versions')()
// 修改1
process.env.NODE_ENV = 'test'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
// 修改2
const webpackConfig = require('./webpack.test.conf')
2、在build文件夾下新建webpack.test.conf.js
,內容復制同級目錄下的webpack.prod.conf.js
,修改一個地方
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 修改
const env = require('../config/test.env')
3、在config文件夾下新建test.env.js
,內容復制同級目錄下的prod.env.js
,修改一個地方
'use strict'
module.exports = {// 修改NODE_ENV: '"test"'
}
4、編輯build文件夾下webpack.base.conf.js
,修改一個地方
output: {path: config.build.assetsRoot,filename: '[name].js',// 修改publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'? config.build.assetsPublicPath: config.dev.assetsPublicPath
},
5、編輯build文件夾下utils.js
,修改一個地方
exports.assetsPath = function (_path) {// 修改const assetsSubDirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'? config.build.assetsSubDirectory: config.dev.assetsSubDirectoryreturn path.posix.join(assetsSubDirectory, _path)
}
6、編輯config文件夾下index.js
,修改兩個地方
build: {// 修改1index: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test/index.html') : path.resolve(__dirname, '../dist/index.html'), // 線上測試環境和線上正式環境入口文件路徑區分// 修改2assetsRoot: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test') : path.resolve(__dirname, '../dist'), // 線上測試環境和線上正式環境打包后文件區分assetsSubDirectory: 'static',assetsPublicPath: './',productionSourceMap: true,devtool: '#source-map',// npm install --save-dev compression-webpack-plugin@1.12.0productionGzip: true,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}
7、編輯package.json
文件,修改三處
"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",// 打正式包,打包后文件在dist文件夾下"build:prod": "node build/build.js",// 打測試包,打包后文件在test文件夾下"build:test": "node build/test.js",// 打正式包和測試包"build": "npm run build:prod && npm run build:test"
},
8、 打包時運行npm run build
即可打測試包和正式包。如果只需要測試包,則執行npm run build:test
;如果只需要正式包,則執行npm run build:prod
。
那么,在nginx配置代理的時候,測試服務器應該代理到test/
文件夾,正式服務器應該代理到dist/
文件夾。 在開發的時候,可以用process.env.NODE_ENV
的值來判斷運行環境:開發環境development
、測試環境test
、生產環境production
。而不應該通過location.hostname來判斷運行環境了。
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态