史上最详细的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