webpack學習筆記

一、什麼是webpack

模塊打包工具 ：分析項目結構，找到JS模塊以及其它的一些瀏覽器不能直接運行的語言（less等），並將其打包爲合適的格式以供瀏覽器使用。

二、webpack核心概念

主要有 6 部分：

• Entry : 輸入入口，webpack構建第一步從這裏開始
• Moudle ：一個模塊對應一個文件，從entry 開始遞歸找到全部依賴的模塊
• Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割
• Loader：模塊轉換器，將模塊原內容按照需求轉換成新內容
• Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情
• Output：輸出，在 Webpack 通過一系列處理並得出最終想要的代碼後輸出結果

三、webpack 的工做流程

項目看成一個總體，經過給定的主文件，webpack從主文件開始找到項目全部依賴的文件，再用loaders處理這些文件，最後打包爲一個瀏覽器可識別的javascript文件。

四、執行流程

1. 遞歸解析 entry 依賴的全部 module；
2. 每找到一個module，根據配置的loader去找相應的轉換規則；
3. 對module進行轉換後再解析當前module所依賴的module；
4. 這些模塊以以惡搞entry爲分組，以一個entry和依賴的module就是一個chunk；
5. webpack將全部chunk 轉換成文件輸出，並在必定時候執行plugin邏輯。

五、配置

一、全局安裝webpack

$ sudo npm install -g webpack (全局安裝）

二、建立package.json文件夾

$ npm init
在終端中使用命令能夠自動建立這個package.json文件。輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可

三、在項目中安裝Webpack做爲依賴包

npm install --save-dev webpack

四、建立兩個文件夾

app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的JavaScript模塊，public文件夾用來存放以後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來咱們再建立三個文件:

• index.html --放在public文件夾中;
• Greeter.js-- 放在app文件夾中;
• main.js-- 放在app文件夾中;

五、在index.html中寫入代碼

目的在於引入打包後的js文件（這裏咱們先把以後打包後的js文件命名爲bundle.js）

六、在Greeter.js中寫入代碼

定義一個返回包含問候信息的html元素的函數,並依據CommonJS規範導出這個函數爲一個模塊

七、在main.js中寫入代碼

用以把Greeter模塊返回的節點插入頁面

八、經過配置文件使用webpack

定義一個配置文件，將全部與打包相關信息均放在配置文件中。新建webpack.config.js文件，寫入配置信息，主要涉及到的內容是入口文件路徑和打包後文件的存放路徑。

有了這個配置以後，再打包文件，只需在終端裏運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就能夠

]

九、更快捷的執行打包任務

能夠經過在package.json中對scripts對象進行相關設置便可，設置方法以下：

![圖片上傳中...]

配置後執行npm start便可進行快速打包

十、webpack其餘強大功能

（1）source maps
source maps 提供編譯文件和源文件的對應。
配置後，webpack 就能夠在打包時爲咱們生成source maps，這爲咱們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。在webpack的配置文件中配置source maps，須要配置 devtool:

devtool選項	配置結果
source-map	在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map，可是它會減慢打包速度；
cheap-module-source-map	在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；
eval-source-map	使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項能夠在不影響構建速度的前提下生成完整的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定不要啓用這個選項；
cheap-module-eval-source-map	這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具備類似的缺點；

對小到中型的項目，eval-source-map 是一個很好的選項，只應該開發階段使用它，繼續對上文新建的webpack.config.js，進行以下配置:

(2)構建本地服務器
經過構建本地服務器，可讓瀏覽器監聽代碼修改，自動刷新修改後的結果，改構建基於node.js，不過它是一個單獨的組件，在webpack中進行配置以前須要單獨安裝它做爲項目依賴。

npm install --save-dev webpack-dev-server

dev-server的配置項以下所示：

devserver的配置選項	功能描述
contentBase	默認webpack-dev-server會爲根文件夾提供本地服務器，若是想爲另一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄（本例設置到「public"目錄）
port	設置默認監聽端口，若是省略，默認爲」8080「
inline	設置爲true，當源文件改變時會自動刷新頁面
historyApiFallback	在開發單頁應用時很是有用，它依賴於HTML5 history API，若是設置爲true，全部的跳轉將指向index.html

配置dev-server 位置在webpack.config.js中，配置添加後以下圖所示：

在配置好dev-server後還須要再package.json 的 scripts 中配置運行命令，以下圖所示：

(3）Loaders
經過使用不一樣的loader，webpack有能力調用外部的腳本或工具，實現對不一樣格式的文件的處理，好比說分析轉換scss爲css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件，對React的開發而言，合適的Loaders能夠把React的中用到的JSX文件轉換爲JS文件。
Loaders 須要單獨安裝，且配置在webpack.config.js 中的 modules 關鍵字下進行配置，配置項：

• test：匹配 loaders 所處理文件的拓展名的正則表達式（必須）
• loader : loader 名稱 （必須）
• include /exclude : 手動添加須要處理的文件（文件夾） 或 屏蔽不須要處理的文件（文件夾）（可選）
• query : 爲loader提供額外的設置選項（可選）

(4）Babel
babel 是一個js編譯平臺，能夠編譯ES6 、ES7，也可以使用JSX等語法
安裝ES6以及JSX解析包

// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack中配置babel ：

（5）插件（Plugins）
插件用於擴展webpack。
plugins和loaders的區別：

• loaders 是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個；
• plugins 插件並不直接操做單個文件，它直接對整個構建過程其做用。

插件的使用須要用npm安裝，而後在webpack配置中plugins字段下添加實例：

打包後的文件就會添加版權聲明。
一些插件：

• Hot Module Replacement 容許你在修改組件代碼後，自動刷新實時預覽修改後的效果。
• HtmlWebpackPlugin 依據一個簡單的index.html模板，生成一個自動引用你打包後的JS文件的新index.html

問題記錄：

一、在安裝時提示沒有權限

解決：mac 電腦有權限限制，須要使用 sudo 進行安裝