[TOC] ## 前言 本文重點介紹各種loader的配置以及使用，對于本文中沒有涉及的loader請自行解決完成其開發配置。 ## loaders使用簡介 通過使用不同的loader，webpack有能力調用外部的腳本或工具，實現對不同格式的文件的處理。比如對樣式預處理器，js等轉換。Loaders需要單獨安裝并且需要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括以下幾方面：test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須） loader：loader的名稱（必須） include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）； query：為loaders提供額外的設置選項（可選） 比如：對js所使用的loader，我們查看下代碼部分的配置。 ~~~ module: { rules:[ { test: /\.js$/, loader: 'babel-loader?cacheDirectory=true', exclude: /node_modules/, include: [resolve('src'), resolve('test')] } ] } , ~~~ ## css-loader * css解析（支持樣式預處理器的解析） 因為在webpack中，最后導出的只有一個webpack的產出bundle.js文件，所以我們其他的資源比如樣式就要通過import或者require的方式引入之后才能使用。下面介紹的三種方法都是可以使用的，如果你沒有特殊的需求，建議使用最后一種，簡單方便。 在app的目錄下，我們新建main.css的樣式文件，然后通過require的方式加載進去。 ~~~ // 復雜配置 { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } //簡單寫法 { test: /\.css$/, loaders: [ "style-loader" , "css-loader" ] } //簡單寫法2 { test: /\.css$/, loader: "style-loader!css-loader" } ~~~ css模塊化，如果你想對應組件中適配性的引入樣式，可以使用css模塊化的方式，css-loader增加配置potions:{module:true},這樣就可以在組件引入樣式之后，具體使用的時候className={styles.root}。相同的類名也不會造成樣式的污染。 ## 樣式預處理器 loader > sass作為常用的樣式預處理語言，我們需要了解其加載以及配置的方式，比如less-loader.sass-loader ,stylus-loader,postcss-loader,我們也可以類比它的使用，同時輔助autoprefixer完成樣式后綴的添加。（最新的版本語法說明中需要加完整的名稱sass-loader） * 常規簡單配置sass-loader ~~~ npm install --save-dev sass-loader autoprefixer node-sass //針對樣式文件，webpack里加對應的loader,最新版的語法中需要設置完整的loader { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }, ~~~ <br> * 將樣式打包為額外的樣式文件 ~~~ cnpm i extract-text-webpack-plugin --save-dev //webpack.config.js中配置 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //配置文件中加相關的配置,不需要加style-loader，因為已經是css文件了。 module:{ loaders:[ { test:/\.scss/, loader:ExtractTextPlugin.extract("css-loader!sass-loader") } ] } //puligins關鍵字中加相關的產出文件style.css文件中，提供生產使用 plugins:[ new ExtractTextPlugin("style.css"); ] ~~~ * 將當前樣式按照必要樣式以及不必要樣式分別加載 比如說頁面基本樣式是渲染必備的，但是交互彈出框部分的樣式可以做延遲。下面針對這一個需求做程序上的處理。 * 將當前樣式按照當前頁面樣式以及其他樣式分別加載（待補充） * [官方sass-loader文檔](https://doc.webpack-china.org/loaders/sass-loader/) ## js文件 ## babel部分 ## 圖片loader ## 音頻 視頻loader ## vue文件