初級(jí)的文章和demo已經(jīng)基本完成了，代碼也已經(jīng)上傳到了我的github上，如果你對(duì)webpack的使用并不是十分了解，那么建議你回頭看下走近系列，里面包括了當(dāng)前項(xiàng)目中使用頻繁的插件，loader的講解。以及基本的webpack配置，相關(guān)依賴等。如果你已經(jīng)有了一定的webpack使用經(jīng)驗(yàn)。那么你直接看這篇文章也是完全沒問題的。

　　這一系列會(huì)著重講解webpack的進(jìn)階使用方法，前面文章講解過的一些部分，就不會(huì)再去重復(fù)的解釋。

　　那么，還是先交代一下環(huán)境以及目錄結(jié)構(gòu)，這些你可以直接從github上獲取到：

　　下面是當(dāng)前的環(huán)境配置版本：

　　在實(shí)際的工作當(dāng)中，我們會(huì)區(qū)分不同的環(huán)境來執(zhí)行不同的webpack配置代碼，以實(shí)現(xiàn)不同環(huán)境的要求，當(dāng)前的主要環(huán)境其實(shí)就兩個(gè)，一個(gè)開發(fā)環(huán)境，一個(gè)生產(chǎn)環(huán)境。開發(fā)環(huán)境更傾向于便捷的調(diào)試，開發(fā)的方便，比如熱加載等。而生產(chǎn)環(huán)境希望代碼的體積更小，http請(qǐng)求更少，頁面的加載速度更快。甚至有些時(shí)候兩個(gè)環(huán)境的要求是互斥的。所以才需要根據(jù)不同的環(huán)境來配置不同的代碼。

　　廢話不多說，咱們直接進(jìn)入正題吧。

?

　　在前面的文章中，為了使靜態(tài)資源找到正確的路徑，我們?cè)O(shè)置了一個(gè)變量webpath，那么如果要區(qū)分環(huán)境，變量的值肯定是不同的，那么我們?nèi)绾胃鶕?jù)命令來使webpath獲得不同的值呢，其實(shí)很簡(jiǎn)單：

　　修改一下package.json中的build命令和dev命令，加上一個(gè)參數(shù)，然后我們?cè)趙ebpack.config.js中可以通過process.env來獲取到這個(gè)參數(shù)。這樣就可以區(qū)分不同的環(huán)境了。

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "set type=build&webpack --mode production","dev": "set type=dev&webpack-dev-server --mode development","version": "webpack -v" }

　　那么修改完package.json中的命令后，我們還需要修改一下webpack.config.js中webpath那段代碼：

/*根據(jù)參數(shù)的不同來區(qū)分不同的環(huán)境*/ if(process.env.type == "build"){var webpath={ /*這個(gè)地址目前是隨便寫的，只是為了區(qū)別于開發(fā)環(huán)境，真實(shí)上線的話要改成你上線的地址*/publicPath:"http://www.zaking.com/"} }else{var webpath={publicPath:"http://192.168.199.124:9090/"} }

　　這樣就可以了，運(yùn)行不同的命令來試試效果如何吧。這里簡(jiǎn)單說明一下，process.env是什么，process是node的一個(gè)全局環(huán)境變量，process.env.type也就是你設(shè)置在scripts命令中的type值。更詳細(xì)的內(nèi)容不在這里多說，有強(qiáng)迫癥的小伙伴可以去看看這里：https://nodejs.org/dist/latest-v8.x/docs/api/process.html#process_process_env。

　　那么環(huán)境拆分說完了，如何模塊化配置webpack呢？其實(shí)也很簡(jiǎn)單，聽起來比較高逼格罷了。簡(jiǎn)單說就是把通用變量放在一個(gè)單獨(dú)的js文件中，然后通過export暴露接口，require引入接口而已！比如你在使用vue中一定寫過很多這種東西，再簡(jiǎn)單也要說一下滴。

　　我們新建一個(gè)與webpack.config.js同級(jí)的文件夾，名字就叫做entry.js（入口）。然后我們?cè)趀ntry.js中寫入入口配置的代碼：

const entry ={}; //聲明路徑屬性 entry.path={main:'./src/main.js' } //導(dǎo)出該變量 module.exports = entry;

　　然后在webpack.config.js中引入該模塊，并且修改下入口處的配置代碼：

/*在這里引入entry文件的路徑*/ const entry = require("./entry.js");/*入口文件*/ entry:entry.path

　　這樣就實(shí)現(xiàn)了所謂的模塊化，當(dāng)然這里只是舉一個(gè)簡(jiǎn)單的例子，復(fù)雜的配置項(xiàng)目可能會(huì)有邏輯復(fù)雜的模塊化配置。比如vue-cli那樣的，現(xiàn)在你再去看看vue-cli的代碼，應(yīng)該也可以看懂一些了，只是它的功能更為復(fù)雜，模塊的關(guān)聯(lián)更強(qiáng)。那么這篇文章就暫時(shí)寫到這里。下一篇會(huì)帶大家一起看看如何打包第三方類庫等更貼近生活的實(shí)用技能。本篇文章的代碼也已經(jīng)同步更新到github上了，以后隨著文章的更新會(huì)實(shí)時(shí)同步代碼，方便大家學(xué)習(xí)。

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的走进webpack（1）--环境拆分及模块化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。