webpack基礎使用

隨着前端模塊化開發方式的流行，咱們在開發前端的時候，須要有一個工具來進行對代碼的處理和加工。方便咱們的開發，優化開發流程。webpack就是其中最優秀的處理工具之一。

webpack是什麼

webpack本質上是一個模塊打包工具。將我們寫的每個模塊打包成一個或者多個bundle。固然在打包的過程當中能夠進行咱們須要的處理。

爲何選用webpack

1. 模塊化規範能夠選用es6 module。
2. 能夠對不一樣的資源進行處理。
3. 能夠設置開發環境和生產環境。
4. 有獨立的配置文件。
5. 能夠將代碼分割成不一樣的chunk,實現按需加載。
6. 支持sourcemap。
7. 異步IO加上多級緩存，在增量編譯上速度更快。

安裝和使用

1. 直接做爲依賴包用npm安裝npm i -D webpack
2. 寫一份配置文件，這個配置文件能夠寫一個，而後存起來當模板使用。
3. 在npm腳本中執行webpack

經常使用命令

1. webpack 最基本的啓動命令。
2. webpack -d 提供sourcemaps,方便調試。文件比較大，在開發環境下使用。
3. webpack --colors 輸出結果帶彩色。
4. webpack --profile 輸出性能數據，能夠看到每一步的耗時。能夠定位到打包時間比較長的緣由。

配置文件

入口

1. 入口能夠是一個字符串，一個數組或者一個對象。通常狀況下，單頁面時都是單一入口，即一個字符串就能夠。

輸出

1. 能夠定義輸出的文件名和路徑。通常來講有三個參數設置。
2. path是打包輸出的絕對路徑。
3. filename是打包輸出以後的bundle文件名。
4. publicPath是訪問路徑。

loader

處理css的

1. style-loader 把css經過style標籤出入到html中。
2. css-loader 處理css中的引入文件。
3. url-loader 處理圖片，能夠將圖片處理爲base64格式的。

plugin

1. new webpack.optimize.CommonsChunkPlugin(options)能夠將公共的組件提取出來進行緩存避免重複下載。
2. extract-text-webpack-plugin將css提取到單獨的文件中。

demo地址