各種Loader的使用
前期準備：整理目錄建立相關文件
layer.html
layer.js
layer.less
app.js
index.html
babel-loader 轉換ES6代碼
將es6等轉換爲瀏覽器可以直接處理的JS，需使用預處理js的loader：babel
第一步要安裝babel-loader： 命令行輸入npm i --save-dev babel-loader babel-core
第二步配置babel使其可以轉化指定版本的js，如es2015，使用presers進行配置 指定完之後需安裝 npm install --save-dev babel-preset-env
第三步 使用loader並進行相關配置
像上述這樣操作的過程中出錯了，百度查原因，最後進行了以下的安裝
npm uninstall babel-loader
npm install [email protected]
最後我的各個文件內容如下：
webpack.config.js
layer.js稍作了一些修改，暫時不使用import帶入HTML模板：
處理項目中的CSS 使用css-loader和style-loader
處理css文件中，這兩個loader各自的作用：
- css-loader: 只負責加載css模塊,不會將加載的css樣式應用到html
- style-loader: 負責將css-loader加載到的css樣式動態的添加到html-head-style標籤中
首先安裝這兩個loader： npm i style-loader css-loader --save-dev
新建一個css文件，文件位置與內容如下：
在app.js中導入css文件：
配置文件中配置css-loader和style-loader
配置之後使用npm run webpack進行打包，打包完成的生成html的結果如下：(css文件中的內容會被帶style標籤的插入到html文件head中）
爲兼容性不好的CSS樣式打包時自動添加前綴處理（postcss-loader的使用）
當css文件中有一些瀏覽器支持不是很好的屬性設置的時候比如flex，我們可能需要爲其添加不同的前綴，此時可以使用webpack爲這些兼容性不好的屬性進行統一處理（如加前綴，這是該loader的一個插件功能，還有很多其他的插件可以添加實現更多的功能），通過使用postcss-loader（npm官網有詳細解釋），使用方法如下：
第一步安裝loader 命令行輸入：npm install postcss-loader --save-dev 。此處統一進行加前綴處理，要進行一下安裝autoprefixer 插件 npm install autoprefixer --save-dev
第二步進行相關配置
webpack.config.js文件中如圖所示添加一個!postcss-loader
在webpack.config.js的同級目錄下新建postcss.config.js文件,內容如下：
特別說明，如果直接在webpack.config.js中的plugins中require這個autoprefixer插件，打包則會報錯。所以必須新建一個如上述的配置文件。
打包後的結果如下：（添加前綴成功）
css文件中利用@import ‘路徑’引入了其他文件的css塊
當一個css文件中利用@import ‘路徑’引入了其他文件的css塊，對引入的css塊也使用style-loader、css-loader以及postcss-loader爲屬性添加前綴時，僅使用上面的配置是會報錯的。這時我們要進行特別的配置：配置css-loader後面可以通過?爲其加個參數importLoaders=n，其中n表示css-loader之後額外有多少個loader來處理import引入的css文檔。
實踐如下;
在common.css同級添加一個flex.css文件，flex.css文件內容如下：
利用@import 將flex.css導入common.css
相關配置：
npm run webpack打包之後的結果：（會出現兩個style標籤，且利用import引入的css中屬性加了前綴）
使用less-loader處理less文件（將less轉化爲css）
首先通過npm安裝less和less-loader：
- npm install less --save-dev
- npm install less-loader --save-dev
在app.js文件中導入less文件
在配置文件中進行配置：
命令行npm run webpack結果：（會出現三個style標籤，最後一個將less文件中的內容轉換爲css通過style標籤引入樣式）
使用sass-loader處理scss文件
首先要安裝node-sass和sass-loader
- npm install node-sass --save-dev
- npm install sass-loader --save-dev
在配置文件中進行如下配置就可進行打包了
處理scss文件與less文件類似，就不過多再說了
處理模板文件
對模板進行打包：將模板處理成一個字符串賦值給一個對象的某個屬性，再返回這個對象，最後通過對象的屬性就可調用這個模板。安裝不同的loader可以處理不同的模板文件，具體見webpack官網。
使用html-loader處理webpack中的HTML模板 （將模板處理成字符串後再使用的）
使用前建好相關的目錄文件：
layer.js爲模板文件：
在layer.js中引入模板文件，將其轉化爲對象的某個屬性，並導出這個對象：
在app.js中導入layer對象，並結合dom使用：
在index.html中增加id爲app的div：
下面是html-loader的使用過程：
首先安裝：npm install html-loader --save-dev
然後在配置文件中進行loader的配置：
最後npm run webpack進行打包，打包生成的html文件（模板已經被成功引入使用）：
注意事項：
- html-webpack-plugin 會和 html-loader衝突，如果引入html-loader 會導致<%=htmlWebpackPlugin.options.title %> 編譯不出。
- inject: 'body'不能寫成head,那樣獲取不到app這個id,因爲<div id='app'></div>是在body中。
- 編譯後不會再 ./dist/index.html中顯示，但在瀏覽器中可以顯示。
使用ejs-loader處理webpack中的tpl模板 （將模板處理成函數後再使用的）
使用前建好相關的目錄文件：
新建模板文件layer.tpl，其中使用ejs語法規則：
layer.js
在app.js中，因爲此處的模板作爲處理爲一個函數了，引用時可向其中傳些參數供模板中使用
下面是ejs-loader的使用過程：
首先 安裝：cnpm install ejs-loader --save-dev
其次 進行相關配置：
最後npm run webpack 打包，生成html文件如下：
處理圖片等文件
在對css樣式中引入的圖片文件（如設置背景的圖片）或在根目錄下的index.html中通過img標籤引入的圖片進行打包時都注意將圖片路徑設置爲相對路徑如：./../img.jpg。
可以使用file-loader和url-loader進行圖片文件的打包，我們先實踐使用file-loader
使用前建立好文件目錄：
在tpl模板文件中引入圖片，注意引入方式：
在樣式文件中引入圖片作爲背景圖片：
使用過程如下：
首先 安裝file-loader： npm install file-loader --save-dev
接着進行相關配置：
最後命令行執行npm run webpack進行打包，打包生成的目錄結構和html文件：
接下來是url-loader的使用
使用場景： 當文件大小大於了設置的限制大小，則圖片就交由file-loader進行處理；當圖片大小低於限制大小，就會將圖片轉爲base64編碼，不再是一個url(不再是一個http請求)，圖片會被打包進html,css,js
使用過程：
首先安裝 npm install url-loader --save-dev
其次進行相關的配置：
兩種打包方式的比較：
- 通過http請求load進來。瀏覽器會有緩存，比較適用於重複性較高的圖片。
- 打包成base64。任何地方要用時，都會有base64編碼存在那裏，會造成代碼的冗餘，增加代碼的體積。
使用base64的優缺點：
- 優點：base64就是一串字符串碼來表示的圖片，在加載頁面或者js的時候就一併加載過來，減少圖片引用時單獨的一次http請求。瞭解web端性能優化的同學都知道，http請求每次建立都會佔用一定的時間，對於小圖請求來說，可能http建立請求的時間比圖片下載本身還長。所以對小圖進行base64轉碼是優化http請求，保證頁面加速渲染的一種手段。
- 缺點：base64缺點就是之前提到的，他會增加圖片本身的大小，對小圖片來說，增加大小導致js的請求增長完全能彌補多一個http請求的建立的時長，這種取捨是划算的。可是對於大圖來說，這樣的取捨是不划算的。
將圖片進行壓縮之後再進行url或file-loader的處理
使用圖片壓縮的loader：image-webpack-loader
首先進行安裝： npm install image-webpack-loader --save-dev
然後進行相關配置：
最後執行npm run webpack 進行打包。打包後可發現圖片文件大小變小了
此外：image-webpack-loader還有很多關於png.jpg等圖片文件優化處理的設置，具體可以查看github上的image-webpack-loader官網可以看到