web项目开发，通常需要有开发环境、测试环境和生产环境，用于配置不同的环境变更，如调用本地接口、测试接口和生产接口，VUE项目是前后端完全分离的框架，像是web界的C/S构架，在做VUE前端开发时，就需要用开发环境甚至于mock环境，等项目上线时，则需要使用生产的环境变量进行打包部署。
一、了解webpack.DefinePlugin
webpack是静态模块打包器，可以将vue项目中所有文件打包成一个或多个jsbundle，其中webpack.DefinePlugin在项目编译时可定义全局常量，应用在项目任何地方。
new webpack.DefinePlugin({
// Definitions...
})
用法：
每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。
-
如果这个值是一个字符串，它会被当作一个代码片段来使用。
-
如果这个值不是字符串，它会被转化为字符串(包括函数)。
-
如果这个值是一个对象，它所有的 key 会被同样的方式定义。
-
如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。
这些值会被内联进那些允许传一个代码压缩参数的代码中，从而减少冗余的条件判断。
// webpack.js
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
// index.js
if (!PRODUCTION) {
console.log('Debug info')
}
if (PRODUCTION) {
console.log('Production log')
}
注意，因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 '"production"', 或者使用 JSON.stringify('production')。
官方文档：https://www.webpackjs.com/plugins/define-plugin/
二、项目中如何配置多环境
1. 定义webpack多环境配置文件
通过修改根目录的npm配置文件package.json，通过--config设置webpack执行脚本
了解了webpack.DefinePlugin，回到我们的项目中来，项目使用官方vue-cli进行初始化框架，可以看到初始化的项目中会有build和config两个文件夹，详细文件如下：
vue.png
其中webpack.dev.conf.js和webpack.prod.conf.js对应的是webpack不同环境下的打包配置，dev是开发环境，开启了调试功能，而prod是生产环境，可使用各种插件进行项目优化，比如代码压缩；
打开webpack.dev.conf.js可以找到下面这段代码：
// 定义全局变量process.env
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
// dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL: '"http://localhost:9000/api"',
})
// 项目中使用如index.js
console.log(process.env.NODE_ENV); // 输出development
console.log(process.env.BASE_URL); // 输出http://localhost:9000/api
为此，我们如有需要增加其它环境配置，只需copy一份webpack.dev.conf.js，如改名为webpack.local.conf.js，按上面的介绍修改对应的全局变量即可。
2. 修改配置文件package.json
{
"name": "vux-demo",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "vipinchan <chenweiping@xiamenair.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.16.2",
"fastclick": "^1.0.6",
"jsonp": "^0.2.1",
"superagent": "^3.5.2",
"superagent-jsonp": "^0.1.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-scroll-behavior": "^0.1.6",
"vuex": "^2.1.1",
"vuex-i18n": "^1.3.1",
"vux": "^2.2.0",
"mockjs": "1.0.1-beta3"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"compression-webpack-plugin": "^0.3.2",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"webpack-bundle-analyzer": "^2.9.0",
"node-notifier": "^5.1.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"yaml-loader": "^0.4.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"postcss": "^5.2.10",
"postcss-less": "^0.15.0",
"vux-loader": "^1.0.56",
"vue-loader": "^13.3.0",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"portfinder": "^1.0.13",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"object-assign": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
package.json是npm的配置文件，其中定义了项目基本信息、项目依赖库以及最重要的node运行脚本，可通过webpack --config指令指定加载配置文件，运行脚本定义区看第七行代码：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
"build": "node build/build.js"
},
npm run dev运行webpack-dev-server，并指定配置文件webpack.dev.conf.js。
npm run local运行webpack-dev-server，并指定配置文件webpack.local.conf.js。
npm run build使用node执行build/build.js。
如此便可灵活实现项目的多环境配置，一键切换开发环境、测试环境和生产环境，方便本地开发调试、部署。
3. 学习webpack-dev-server常用命令
webpack-dev-server是一个小型的Node.js Express服务器，它使用webpack-dev-middleware来服务于webpack的包，除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时。
--watch 监听文件的变化
--content-base build/ 默认会以当前目录为基本目录,除非你制定它
--quiet 控制台中不输出打包的信息
--progress 显示打包的进度
--hot 模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉
--inline inline模式
--port 3000 指定端口
--host 指定host，默认为losthost，当然指定此项大多数情况下是为了这个服务可以被外部服务访问，这种情况之下，你最好应该确保你的服务运行在DNS解析的域名IP一致
--compress 对所有服务启用gzip压缩
--config configs/webpack.vipinchan.conf.js 加载指定配置文件
网友评论