史上最详细的webpack 讲解2 （DefinePlugin中的淫技巧）-白红宇

今天我突然发现我的掘金原创排行已经落到了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,说明我们在开发环境上就不会验签

如果大家有更好的用法请留言谢谢

渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学，微信 zzx1994428 QQ494755899

支持我继续创作和感到有收获的话，请向我打赏点吧

如果转载请标注出自@混元霹雳手ziksang

赞