配置好我們webpack的運行環境時，聯想下vue-cli。平時使用vue-cli會自動幫我們配置並生成項目。我們在src下進行項目的開發，最後npm run build 打包生成我們的dist的目錄。不知道你是否還記得，還是讓我們進入下一節讓我們感受下這其中的正個流程吧。
三、npm run build 發生了什麼
在我們的根項目下try-webpack新建一個src目錄。在src目錄下新建一個index.js文件。在裡面我們可以寫任意的代碼，以案例為主：
寫完之後我們在終端運行我們的命令： npm run build ，你就會發現新增了一個dist目錄，裡面存放著webpack打包好的main.js文件。這和我們在vue-cli裡操作是一樣的。
四、webpackp配置流程篇
我們在開發是一般會打包src下的什麼文件呢？我們可以回憶一下，其實vue-cli項目src下不就這幾點嘛：
- 發佈時需要的html，css，js
- css預編譯器stylus，less，sass
- es6的高級語法
- 圖片資源.png，.gif，.ico，.jpg
- 文件間的require
- 別名@等修飾符
那麼我將會分這幾點來講解webpack中webpack.config.js的配置，跟著腳步，一步一步的來完成我們的流程線。
✍️Html在webpack中的配置
在項目的根目錄try-webpack下新建webpack.config.js文件，以commonJS模塊化機制向外輸出，並且新建一個index.html。
配置好後，在終端輸入npm run dev後webpack將我們的html打包好並且自動將我們的js引進來了。
live-sever我們的dist目錄，啟動一個8080端口，我們就可以看到我們的Hello World了。這就是我們上線版的頁面。
css在webpack中的配置
在我們vue-cli裡，我們可以使用css去寫我們的樣式，也可以使用高級stylus，less，sass等預編譯器。這裡就以less為例，看看webpack怎麼將他打包成一個css。
我們在執行我們的 npm run build 之後並沒有我們的css，為什麼呢？原來在webpack配置裡css in js。意思是在打包是我們的css是打包在我們的js裡的，所有我們引入了extract-text-webpack-plugin插件將css從裡面剝離出來。不過又一個問題，require的機制？
在我們打包過程中，文件的引用require 按照順序來打包，這就是文件依賴的機制。打包好後我們在live-server，發現我們的樣式也上去了，並且css部分分離出來了。
js在webpack中的配置
現在隨著es6的普及，越來越多的代碼使用es6了，但是很多瀏覽器並不支持es6，比如async/awiat，const。因此需要我們引用babe來把我們es6的代碼編譯為es5。在跟目錄下新建.babelrc，簡單配置下：
大家有沒有學會呢？沒學會的話記得私信小編"011"哦~
閱讀更多 WEB前端交流 的文章
