史上最詳細的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