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

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

　　那么，還是先交代一下環境以及目錄結構，這些你可以直接從github上獲取到：

　　下面是當前的環境配置版本：

　　在實際的工作當中，我們會區分不同的環境來執行不同的webpack配置代碼，以實現不同環境的要求，當前的主要環境其實就兩個，一個開發環境，一個生產環境。開發環境更傾向于便捷的調試，開發的方便，比如熱加載等。而生產環境希望代碼的體積更小，http請求更少，頁面的加載速度更快。甚至有些時候兩個環境的要求是互斥的。所以才需要根據不同的環境來配置不同的代碼。

　　廢話不多說，咱們直接進入正題吧。

?

　　在前面的文章中，為了使靜態資源找到正確的路徑，我們設置了一個變量webpath，那么如果要區分環境，變量的值肯定是不同的，那么我們如何根據命令來使webpath獲得不同的值呢，其實很簡單：

　　修改一下package.json中的build命令和dev命令，加上一個參數，然后我們在webpack.config.js中可以通過process.env來獲取到這個參數。這樣就可以區分不同的環境了。

"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那段代碼：

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

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

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

　　我們新建一個與webpack.config.js同級的文件夾，名字就叫做entry.js（入口）。然后我們在entry.js中寫入入口配置的代碼：

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

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

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

　　這樣就實現了所謂的模塊化，當然這里只是舉一個簡單的例子，復雜的配置項目可能會有邏輯復雜的模塊化配置。比如vue-cli那樣的，現在你再去看看vue-cli的代碼，應該也可以看懂一些了，只是它的功能更為復雜，模塊的關聯更強。那么這篇文章就暫時寫到這里。下一篇會帶大家一起看看如何打包第三方類庫等更貼近生活的實用技能。本篇文章的代碼也已經同步更新到github上了，以后隨著文章的更新會實時同步代碼，方便大家學習。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。