问题
目前手头上的项目要分test环境,qa环境,生产环境,需要根据不同的环境进行项目打包。
参考其他人的项目,可以使用 yargs
插件来识别命令行打包。
准备
npm install yargs --save
下载 yargs 插件并保存到 package.json
中。
配置
/config
文件夹下创建出对应的配置文件,以要打包test环境的项目包为例,在 /config
下创建出test.env.js
文件,内容如下:
'use strict'
module.exports = {
NODE_ENV: JSON.stringify('test'),
// 配置所有后端请求的url前缀地址
baseURL: JSON.stringify('http://110.110.110.110:8808'),
// 自定义通用配置,在组件内可以直接引用,如:
returnURL: JSON.stringify('http://110.110.110.110:8808/first.html')
}
/config
文件下配置完成之后,在/build
文件夹下创建webpack.test.conf.js
,并复制默认的webpack.prod.conf.js
里的内容,修改如下部分:
...
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 修改路径,对应在config文件夹中新创建的test.env.js
const env = require('../config/test.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
...
...
build.js
文件中添加:
// 对webpack.base.config中的publicPath生效
// publicPath将根据NODE_ENV决定用的是index.js中module.exports的dev还是build
process.env.NODE_ENV = 'production'
// 引用了 yargs 插件,添加这部分配置,自动根据profile找到对应的webpack配置文件
const argv = require('yargs').argv
const profile = argv.env || 'dev'
最后去package.json
文件中修改script
部分,写好打包命令:
...
...
"scripts": {
// dev环境本地部署命令
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev",
"qa": "webpack-dev-server --inline --progress --config build/webpack.qa.conf.js --env qa",
// test环境本地部署命令
"test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js --env test",
// 生产环境本地部署命令
"prod": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js --env prod",
"lint": "eslint --ext .js,.vue src",
"build:dev": "node build/build.js --env dev",
"build:qa": "node build/build.js --env qa",
// test 打包
"build:test": "node build/build.js --env test",
// 生产打包
"build:prod": "node build/build.js --env prod"
},
...
...
运行
以上面的test为例:
本地运行:npm run test
项目打包:npm run build:test
网友评论