今天我突然发现我的掘金原创排行已经落到了120位，这是什么原因，因为我分享的不够多，还是我分享的不够好，看的人不多，又好几天没和大家几面了，来吧！死也死在分享上面，怎么说呢，今天讲解的东西也不是很深奥的东西，以前一直没有用到这东西，今天好好看了这东西，可以带来很大的方便，我就给大家举两个例子玩玩
我什么都不要我只要
今天我就不详细的列出创建目录结构了，看过我webpack 讲解1 – 讲解的还是继续原目录结构，但是我们我们在build文件夹里加一个文件那就是dev-server.js，说明那一个开发环境。然后我们在package.json里scrpit 里加一段 开发启动脚本
"scripts": { "build": "node build/build.js", "dev": "node build/dev-server.js" },目录结构
我们在build.js里加上一个webpack内置的plugin,那就是defineplugin,在vue-cli中的配置是这样的
本质上的意思就是对开发环境 和生产环境对vue中对那些warning和一些提示信息的代码进行了去除，意思就是你在开发环境的时候，你可以看到那些提示信息，但是在生产环境中那些提示信息不会加载到代码中，这对代码量大大减少，也不用开发两套进行引入。或者自己手动去改变一些东西
那我们自己的开发环境 和 生产环境会遇到那些问题呢？如何不用手动改变后再进行打包
第一个方法，自动改变环境配置
1.我们用vue-cli打包的时候用一般用的都是proxyTable进行反向代理，那接口一般肯定都是这样的
www.ziksang.com/api那在行产环境中。我们接口域名肯定是
www.ziksang.com如果不在DefinePlugin配置的话我们就要在生产环境 和 开发环境的时候手动改变这些东西，真的很烦。有些时候忘记改，还要测试从新发包，现在公司发包次数又减少，不让乱发包，那怎么办。看下面
我们在build.js中的代码跟我上篇文章一样，我还是帖出来一下
const webpack = require("webpack"); const rm = require('rimraf') const ora = require('ora'); const path = require('path') const chalk = require('chalk'); const spinner = ora({ color: 'green', text: '正为生产环境打包，耐心点，不然自动关机。。。' }) spinner.start() rm(path.resolve(__dirname, '../dist/js'), (err) => { if (err) throw err webpack({ entry: './src/main.js', output: { path: path.resolve(__dirname, '../dist/js'), filename: 'ziksang.js', }, plugins: [ new webpack.DefinePlugin({ LOCAL_ROOT: JSON.stringify("http://ziksang.com") }) ] }, (err, stats) => { spinner.stop() if (err) throw err console.log(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') // style a string console.log(chalk.blue('好消息！')); // compose multiple styles using the chainable API console.log(chalk.blue.bgRed.bold(' 代码已经打包成功，上线吧')); }) })你看我在DefinePlugin中加了LOCAL_ROOT: JSON.stringify("http://ziksang.com") 那我们对dev-server.js文件中原本不动的把build.js中的代码复制进去然后改成LOCAL_ROOT: JSON.stringify("http://ziksang.com/api")
在main.js中console.log(LOCAL_ROOT)
直接开始 npm run dev你会发现 打印出来的是 "http://ziksang.com/api"
再 npm run build 打印出来的是 "http://ziksang.com"
因环境问题引起的开发代码和生产代码
比方说，我在做项目的时候，微信有一个验签功能，我们一般喜欢本地联调，后端本地生成不了验签，再加上测试环境，验签功能是一个小时就过去，每次都要从新复制换新的签名，进行测试，我想说真的很烦，那到生产环境那肯定要进行验签，我们用DefinePlugin来解决
我在build.jsDefinePlugin中加了BUILD_EVN: JSON.stringify(true) 那我们对dev-server.js文件中原本不动的把build.js中的代码复制进去然后改成BUILD_EVN: JSON.stringify(false)
console.log('看看到底有没有验签') if (BUILD_EVN) { setTimeout(() => { alert('验签完毕') }) }我们npm run build
我们看到if (BUILD_EVN) 自动转化成了true,就会执行验签
我们再npm run dev
我们看到if (BUILD_EVN) 自动转化成了false,说明我们在开发环境上就不会验签
