史上最詳細的webpack 講解2 （DefinePlugin中的淫技巧）

混元霹靂手發表於2017-04-11
WebPlugin

今天我突然發現我的掘金原創排行已經落到了120位，這是什麼原因，因為我分享的不夠多，還是我分享的不夠好，看的人不多，又好幾天沒和大家幾面了，來吧！死也死在分享上面，怎麼說呢，今天講解的東西也不是很深奧的東西，以前一直沒有用到這東西，今天好好看了這東西，可以帶來很大的方便，我就給大家舉兩個例子玩玩

我什麼都不要我只要

贊

今天我就不詳細的列出建立目錄結構了，看過我webpack 講解1 -- 講解的還是繼續原目錄結構，但是我們我們在build資料夾里加一個檔案那就是dev-server.js，說明那一個開發環境。然後我們在package.json裡scrpit 里加一段 開發啟動指令碼

"scripts": {
        "build": "node build/build.js",
        "dev": "node build/dev-server.js"
    },複製程式碼

目錄結構

史上最詳細的webpack 講解2 （DefinePlugin中的淫技巧）

我們在build.js里加上一個webpack內建的plugin,那就是defineplugin,在vue-cli中的配置是這樣的

史上最詳細的webpack 講解2 （DefinePlugin中的淫技巧）

本質上的意思就是對開發環境 和生產環境對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

史上最詳細的webpack 講解2 （DefinePlugin中的淫技巧）

我們看到if (BUILD_EVN) 自動轉化成了true,就會執行驗籤

我們再npm run dev

史上最詳細的webpack 講解2 （DefinePlugin中的淫技巧）

我們看到if (BUILD_EVN) 自動轉化成了false,說明我們在開發環境上就不會驗籤

如果大家有更好的用法請留言謝謝

渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899

支援我繼續創作和感到有收穫的話，請向我打賞點吧

史上最詳細的webpack 講解2 （DefinePlugin中的淫技巧）

如果轉載請標註出自@混元霹靂手ziksang

相關文章