第一步：创建命令
下面在 packge.json 文件中，创建一条命令
{
"name": "xxxx",
"version": "1.0.0",
"description": "xxxx",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build_dev": "node build/build_dev.js" // 1、此处是自定义的。注意：不要把此注释复制代码中
},
"dependencies": {...
},
"devDependencies": {
.....
}
第二步：创建 build_dev.js
在 build文件夹中，复制build.js文件，并且重新命名为 build_dev.js
第三步：定义变量
下面的变量用于判断打包那个配置环境
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'develop' // 1、定义变量
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
第四步：判断是否打哪个包
此处才是真正的换打包的地方。在build文件夹中找到 webpack.prod.conf 文件，修改下面的打包配置
'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 env = process.env.NODE_ENV == ' develop' ? require('../config/dev.env') :
require('../config/prod.env') ; // 1、此处就是判断哪个文件配置打包，如果是 devs 运行的，则测试包
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking:
第五步：请求
此处略过一些配置测试与正式环境详情了。在 config 文件中的 dev.env.js与prod.env.js 文件，进行配置变量。在axios 封装的文件中，使用 process.env.xx进行获取数据
第六步：打包
进行 npm run build_dev(测试环境) ，npm run build(正式环境)。下面就是请求了。
