webpack2學習隨筆

 

 

 

 

 

 

 

1 webpack 概述

 

　　Webpack是一款用戶打包前端模塊的工具。主要是用來打包在瀏覽器端使用的javascript的。同時也能轉換、捆綁、打包其餘的靜態資源，包括css、image、font file、template等。我的認爲它的優勢就是易用，並且經常使用功能基本都有,另外能夠經過本身開發loader和plugin來知足本身的需求。這裏就儘可能詳細的來介紹下一些基本功能的使用。

主要功能

1. 1. 把相關的依賴代碼按需分割成不一樣的代碼塊
   2. 加載時間短
   3. 每一個靜態資源均可以成爲一個模塊
   4. 可以集成第三方庫做爲模塊
   5. 能夠自定義模塊的每一部分
   6. 適合大項目

 

2 webpack 安裝 

　　 先安裝node

1. 進入根目錄 npm install  --- 安裝node
2. 初始化node  npm init
3. 安裝webpack  npm install webpack --save-dev/ npm install webpack -g  （局安裝）
4. 執行webpack命令   webpack

3 配置文件webpack.config.js

module.exorts={}

1) entry

 　　//入口文件配置 
　　當入口文件爲單個時 ，參數爲字符串，

　　　　

 

　　　當入口文件爲多個時，參數爲對象/數組 其中key 爲name

　　　　

  2）output 

生成文件配置 

 

參數

path:生成路徑，webpack2要求絕對路徑，因此先引入path文件

filename: 生成的文件名字 能夠動態建立也能夠寫死，稍後講解

publicPath:上線時 文件在線地址

動態建立文件名：

[id]--生成chunk文件的id

[name]--chunk的name  例如文件入口的key值

[hash]---打包時生成的hash碼

[chunkhash]--- 每一個chunk生成的hash碼，當文件改變時這個也跟隨改變，文件內容改變時 文件名字也跟隨改變

因此文件結構能夠用以上三種任意拼接

3)插件的使用plugins

與module 同級，plugins:[]

一, html-webpack-plugin

 對html文件的操做 

1)npm install html-webpack-plugin --save-dev

2)基礎用法

 

 

參數解析

template 模板文件

filename:生成的html文件名字可使用[name]-[hash]-[chunkhash]命名

inject：將生成的js文件插入到html文件的哪各部分 true | 'head' | 'body' | false

excludeChunks：[]排除那些chunk

chunks:[]包含哪些chunk

title：html title

或者把文件內容讀寫到html文件模板裏

 

更多參數參考https://github.com/jantimon/html-webpack-plugin

二 ExtractTextPlugin

生成單獨的css 文件

 

 

 

 

 

 更多參考

https://webpack.js.org/plugins/extract-text-webpack-plugin/#components/sidebar/sidebar.jsx

更多插件後續更新中....

4)loader

基本用法

1）安裝loader 

eg:

2）引入loader

 

3)webpack.config.js 配置

1.加載單個loader

2 加載多個laoder

主意：loader的加載順序是從右往左的優先級

3 對每一個laoder進行單獨配置

4 參數詳解

 

bable-loader

1

 

2頁面添加loader

 

webpack1.0版本

 

html-loader

打包html文件，同圖片解析loader一同使用 file-loader 或url-loader

 

配置裏添加loader

注意：minimize屬性對html 文件進行壓縮

壓縮的參數有

例如

 

http://www.css88.com/doc/webpack2/loaders/html-loader/

 

file-loader 

打包圖片爲圖片文件

 

url-loader

打包圖片 參數設置

 壓縮圖片 image-webpack-loader

或者能夠這麼寫

 

 

當limit>原圖片實際大小時 打包後將以二進制流展現,<原尺寸會以源文件展現

css-loader

能夠經過option配置更多參數例如

 

css壓縮

ExtractTextPlugin

css 生成單獨的文件

 

 postcss-loader  

處理css 瀏覽器前綴

研究了好久 webpack1和webpack2 用大不同

 

 https://webpack.js.org/loaders/postcss-loader/#components/sidebar/sidebar.jsx