webpack打包模塊的源碼 執行順序
1 把所有的模塊代碼放入函數中，用一個數組保存起來
2 根據require時傳入的數組索引，能知道需要哪一段代碼
3 從數組中，根據索引取出包含我們代碼的函數
4 執行該函數，傳入一個對象 module.exports
5 我們的代碼，按照約定，正好是用module.exports ='xxx'進行賦值
6 調用函數結束后，module.exports從原來的空對象，就由值了
7 最終return module.exports 作為require函數的返回值
style-loader css-loader
遇到后綴為css的文件，webpack顯用css-loader加載器去解析這個文件，最后計算完的css，將會使用style-loader生成一個內容為最終解析完的css代碼的style標簽，放在head中；webpack的打包過程中，遇到后綴為css的文件，就會使用style-loader和css-loader中加載這個文件
webpack最終將各個模塊打包成一個文件，因此我們樣式中的url路徑時相對如接口html頁面的，而不是相對於原始css文件所在的路徑的。
這就是導致圖片引入失敗，這個問題使用file-loader解決的，file-loader可以解析項目中的url引入，(不僅限於css)，根據我們的配置，將圖片
拷貝到響應的路徑，再根據我們的配置，修改打包后文件引用路徑，使之指向正確的文件
對於簡易比較小的圖片，使用base64編碼，可以減少一次圖片的網絡請求，那么對於比較大的圖片，使用base64就不合適了，編碼會和html混在一起，
一方面可讀性查，另一方面加大了html頁面的大小，反而加大了下載頁面的大小，得不償失，因此設置一個合理的limit是非常由必要的。
webpack-dev-server
--open 自動打開瀏覽器
--hot 熱更新，不再刷新的額情況下替換css樣式
--port 9999 指定端口
--inline 自動刷新
--process 顯示編譯進程
在package.json中設置
es6解析
解析es6需要使用babel
babel-core是核心模塊
babel-core的作用是把js代碼分析成ast(抽象語法樹)，方便各個插件分析語法進行相應的處理。有些新語法在低版本的js中
不存在的，如箭頭函數 reset參數 函數默認值等，這種語言層面的不兼容只能通過將代碼轉為aet，分析其語法后再轉為
低版本js
babel轉義器本身，提供了babel的轉譯API，如babel transfrom等，用於對代碼進行轉譯，像webpack的babel-loader
就是調用這些API來完成轉譯的過程的。
babel-loader
再將es6的代碼transform進行轉義時，就是通過babel-loader來完成的。
babel-preset-env
如果要自行配置轉譯過程中使用的各類插件所以babel官方幫我們做了一些預設的插件集，稱之為preset，這樣我們只需要使用對應的preset就可以了，以js標准為例，
babel提供例如如下的一些preset:
es2015 es2016 es2017 env
es20xx的preset只轉譯該年份批准的標准，而env則代指最新的標准，包括latest和es20xx各年份，另外，還有stage-0到
stage-4的標准成形之前的各個階段，這些都是實驗版的preset，建議不要使用。
babel-plugin-transform-runtime
babel編譯時只轉換語法，幾乎編譯所有新的js語法，但不會轉化DOM里面不兼容API比如 Promise Set Symbol Array.from
awit async等等API
npm install babel-core babel-loader babel-preset-env babel-plugin-transform-runtime -D
編譯的時候需要排除node_modules下的代碼：
因為js的編譯速度很慢，一般發布在npm上的代碼都有源代碼和編譯后的代碼，同時默認引用的是編譯以后的代碼。如果不
排除，就是編譯后的又編譯一邊，沒有任何效果，還浪費時間
單文件引入
webpack中使用vue搭建單頁面應用，安裝vue-loader vue-template-compiler
配置loader
報錯：
需要加載插件：
運行報錯：
需要修改代碼：
在.vue文件中引入img src顯示：
修改配置：
默認是true
在開發模式下.vue文件中寫的樣式，使用extract-text-webpack-plugin 打包之后，沒有了，需要安裝vue-style-loader
npm install vue-style-loader --save-dev
不需要配置，默認情況下在vue-loader中使用，是基於style-loader的fork。