WEBPACK

WEBPACK

若是你曾經遇到過如下任何一種狀況：

1,載入有問題的依賴項

2,意外引入一些你不須要在生產中用上的css樣式表和S庫，使項目膨脹意外的兩次載入（或三次）庫（引入的css或者js 記載兩次 而webpack只會加載一次 不會形成性能的浪費）

3,遇到做用域的問題—-CSs和lavaScript都會有尋找一個讓你在JavaScript中使用（wepack能避免樣式衝突）

4,Node/Bower模塊的構建系統，要麼就得依靠一個使人發狂的後端配置才能正確地使用這些模塊（wepack正確使用模塊，沒必要擔憂衝突）

5須要優化資產asset交付，但你擔憂會弄壞一些東西等等……（webpack徹底依賴於模塊的配置來打包，不會損壞模塊文件）

6,那麼你能夠從Webpack中收益了。它經過讓JavaScript輕鬆處理你的依賴關係和加載順序，而不是經過開發者的大腦。最好的部分是，Webpack甚至能夠純粹在服務器端運行，這意味着你還可使用Webpack構建漸進加強式網站（webpack誰先引入誰 誰先加載誰）（同時webpack也能應用於客戶端 因此能夠應用於響應式佈局、漸進式網站）

-----------------------------華麗的分割線-----------------------------------

wbpack是用於現代lavaScript應用程序的模塊綁定器。 當Webpack處理您的應用程序時，它遞歸地構建一個包含應用程序所需的每一個模塊的依賴關係圖，而後將全部這些模塊打包到少許的捆綁（一般只有一個），由瀏覽器加載。 這是很是可配置的，但要開始，您只須要了解四核心概念：輸入，輸出，加載程序和插件（加載器是解析靜態資源文件的）

全局安裝： npm install webpack webpack-cli webpack-dev-server-g

依賴安裝： npm install webpack webpack-cli webpack dev-server-save-devQ

注意：vue-cli 是webpack 4的版本纔出現的 webpack16年 沒有 用vue-cli

jq最先的用的版本 1.7版本是變動最大的版本

----------------------------------華麗的分割線-------------------------

babel-loader負責解析 export defalt
es5寫法 model.exports= new 同時 var str = require('./***.vue') 必須帶./ 這是model的語法識別

npm 命令

1,webpack entry.js(入口文件) output.js (出口文件)

2,將入口文件打包爲 出口文件 （如今不能用）

3,會報錯 模式並未配置 這是webpack4以前用的 以後並不能用

webpack不只規範模塊化 同時還能防止盜取

1,js模塊建立，模塊化開發-模塊接收暴露

2,a.js暴露模塊 module.exports=obj；|| export default obj；

3,b.js.接收模塊，設置html須要功能require（"/xxis）II import obi from/xx.is'

4,打包輸出文件

5,webwack b.js -o build.main.js一mode developnent（開發環境build）

6,wcback b.js -o build.main.is一mode production（生產環境bild）

7,Html引入輸出的文件output.js

8,webpack entry.js -o output.js --mode production

-----------------------------------華麗的分割線-----------------------------

webpack的核心功能：就是把瀏覽器不認識的語言轉換爲它認識的語言 主要指babel 解析爲js

----------------------------華麗的分割線-----------------------------------

webpack配置文件只能放在根目錄下 webpack配置文件 webpack.config.js 文件名不能動

----------------------------------------華麗的分割線------------------------

webpack配置文件 5大核心：entry（入口） output（輸出） mode（模塊） loaders（加載器） plugins（插件） configuration(配置)
webpack 遵循commo.js規範
----------------------------------華麗的分割線------------------------------

知識點回顧盲點：node.js 中path用法 www.cnblogs.com/wulinzi/p/8…

第一次整理 若是有很差得地方還望指導