一.什么是Loader

WebPack默認只“認識”以*.js結尾的文件，如果想處理其他類型的文件，就必須添加Loader，有各種各樣的Loader，每個Loader可處理不同類型的文件，每當用WebPack打包時遇到不認識的文件（通過后綴名辨別），如果添加了相應的Loader，就會調用指定的Loader去處理，處理完之后，如果沒有后繼的Loader去處理這類文件，就會返回給調用端，也就是WebPack，WebPack繼續處理，直到處理完成。

二.各種各樣的Loader

1.style-loader和css-loader

我們在./src/目錄下新建一個index.css文件

body{

background-color: red;

}

然后在index.js文件中添加如下操作

import "./index.css"

執行

npm run build

會產生以下輸出結果

ERROR in ./src/index.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
|     background-color: #ddd;
| }
  @ ./src/index.js 1:0-20

我們安裝css-loader和style-loader

在webpack.config.js配置文件中添加Loader

const path = require("path");

module.exports = {

entry: "./src/index.js",

output: {

filename: "bundle.js",

path: path.resolve(__dirname, "dist")

    },

module: {

rules: [

            {

test: /.css$/, //匹配規則，匹配就使用一下Loader去處理

use: [ "style-loader","css-loader",] //這里要注意順序，Loader加載順序規定為從右到左

            }

        ]

    }

};

注意，css-loader負責讀取css文件以及解釋import和require()語句，style-loader負責產生<style></style>標記并把樣式字符串插入到該標記中。

我們再次打包

npm run build

然后運行可以發現頁面背景變紅了

可以看到插入了一個style標簽。

2.file-loader

安裝

npm install file-loader –save-dev

添加圖片資源

const path = require("path");

module.exports = {

entry: "./src/index.js",

output: {

filename: "bundle.js",

path: path.resolve(__dirname, "dist")

    },

module: {

rules: [

            {

test: /.css$/,

use: [ "style-loader","css-loader",]

            },

            {

test: /.(png|svg|jpg|gif)$/,

use: [ "file-loader"]

            }

        ]

    }

};

在index.css文件中添加如下代碼

body{

background-color: red;

background-image: url(./yasuo.jpg);

}

由于產生的文件是一個相對路徑（相對于輸出目錄），所以把index.html放到./dist目錄下，并修改bundle.js引用的路徑，運行

npm run build

效果如下：

運行頁面

添加其他資源也是如此。