1、loader是webpack中一個非常核心的概念。

2、webpack用來做什麼呢?

• 在我們之前的例項中,我們主要是用webpack來處理我們寫的js程式碼,並且webpack會自動處理js之間相關的依賴。
• 但是,在開發中我們不僅僅有基本的js程式碼處理,我們也需要載入css、圖片,也包括下些高階的將ES6轉成ES5程式碼,將TypeScript轉成ES5代    碼,將scss, less轉成css,將.jsx、.vue檔案轉成js檔案等等。
• 對於webpack本身的能力來說,對於這些轉化是不支援的。
• 那怎麼辦呢?給webpack擴充套件對應的loader就可以啦。

3、loader使用過程:

• 步驟一:通過npm安裝需要使用的loader
• 步驟二:在webpack.config.js中的modules關鍵字下進行配置

4、大部分loader我們都可以在webpack的官網中找到,並且學習對應的用法。

這裡以webpack3.6.0為例：

1、建立css檔案normal.css

body{
  background-color: aqua;
}

2、在main.js中進行匯入

//1. 使用CommonJS進行模組化
const {add,mul} = require('./js/mathutils.js');
console.log(add(20,30));
console.log(mul(20,30));

//2. 使用ES6語法進行模組化
import { name, age, height } from "./js/info.js";
console.log("姓名："+ name +" 年齡："+ age +" 身高："+ height);

//3. 依賴css檔案
require('./css/normal.css')

3、在終端中執行：

　　npm install --save-dev [email protected]

　　npm install [email protected] --save-dev

執行成功後會在package.json中新增如下檔案（並標註版本號）

 4、然後在 webpack.config.js中新增如下檔案，執行成功後，

5、終端中執行：npm run build 進行編輯，可看到最終效果