webpack入門03

1，建立webpack項目

2，npm初始化

3，安裝webpack

4，建立其餘目錄和文件

--src：源文件目錄

　　--componets：組件目錄

　　　　--layer：組件layer目錄

　　　　　　--layer.html

　　　　　　--layer.js

　　　　　　--layer.less

　　--css：公用的樣式文件

　　　　--common.css

　　--assets：圖片資源目錄

　　--app.js

--dist：打包後靜態資源目錄

--index.html

--package.json

--webpack.config.js

5，案例1：

• webpack.config.js：定義文件入口，出口和模板

• app.js文件：引用layer模塊

• 定義組件相關文件：layer.html，layer.less，layer.js

6，babel加載器應用

• 下載babel-loader包含babel-loader，babel-core（babel加載器將ES6轉換成瀏覽器能解析的語法）
• 下載babel插件：babel-preset-latest（babel插件用於將模塊打包成指定版本）

• preset插件配置方式一：webpack.config.js
• preset插件配置方式二：package.json

 

 

• loader加載器參數

include：指定要轉換的模塊的目錄，exclude：指定不要轉換的模塊的目錄

include和exclude還能夠配置絕對路徑：

7，CSS加載器應用

• 安裝加載器：style-loader，css-loader

• 給common.css添加樣式

• 將common.js導入到app.js文件中

• 在webpack.config.js中配置加載css加載器

7.1，postcss-loader（css加前綴）

• 安裝postcss-loader插件

• 在webpack.config.js配置postcss-loader，使其打包時自動增長瀏覽器前綴

• 若css採用@import方式引用css文件，那麼這個引用的文件並不會通過postcss-loader

• 經過postcss-loader參數：importLoaders能夠設置，使全部css文件按順序通過：postcss-》css-loader-》style-loader處理

7.2，less-loader（處理less）

• 安裝less-loader

• 配置webpack.config.js

• 編寫用例

7.3，sass-loader（處理scss）

8，處理模板文件

8.1 模板時html語法

• html-loader可以將layer.html做爲模板字符串，在js中進行處理

• 配置webpack.config.js

• 在layer.js導入layer.html，使layer.html可以做爲字符串傳遞給其餘模塊

• 在主頁面中定義好layer要插入到位置

• 在入口文件中引用layer組件模塊，拿到layer組件的模板，將其插入到主頁面中

• 結果：layer組件成功插入到了index.html頁面中

8 .2 模板是ejs語法

• 處理ejs模板須要使用ejs-loader

• 配置webpack.config.js

• 使用ejs語法編寫layer組件模板

• 在layer組件的js中引入模板，引入的模板返回的是一個方法（tpl）

• 入口文件引用layer組件，並向組件傳如參數

• 結果：index.html頁面將根據傳遞的參數顯示layer組件

9，圖片處理

9.1 file-loader

• file-loader能根據相對路徑生成圖片的路徑（css文件，html文件）

• 配置webpack.config.js

• 在css，html文件中引用圖片

• 結果：css，html文件將生成的文件路徑自動轉換到代碼中

• 若在組件的模板文件中使用相對路徑引用圖片，那麼當主頁面引用組件是，圖片路徑不會自動轉換，致使圖片沒法正常顯示，須要使用${require(image_path)}，以下：

結果：使用上面方式後，組件中的圖片才能正常顯示

• 經過如下方式配置webpack.config.js的file-loader組件query參數，可以指定生成的圖片的位置和文件名，以下（assets目錄中，文件名爲圖片原名-5位哈希值.後綴）

9.2 url-loader

• url-loader能根據相對路徑生成文件路徑，且能根據圖片大小生成url方式引用的文件，和database64格式的圖片數據

• 配置webpackconfig.js

• 結果：url-loader限制圖片大小爲20000kb，小於這個值的圖片不會從新打包，而是將圖片數據打包到js和html文件中，因此打包結果只生成兩個文件，且這兩個文件的大小也增大了。

9.3 image-webpack-loader

• 結合file-loader，或url-loader使用，可以對圖片進行壓縮

• 配置webpack.config.js，image-webpack放置url-loader後，先壓縮，再打包

結果：通過壓縮後，圖片的大小隻有7.07kb，而且生成在assets目錄中

加載器使用方式

• 在腳本的require中使用
• 經過CLI命令使用
• 經過配置文件webpack.config.js使用