loaders中文翻譯是裝載機，從字面意思看它是用來安裝某些東西的铲觉，它可以調(diào)用框架以外的腳本和工具來處理各種格式的文件，比如將Scss吓坚、Less分析轉(zhuǎn)換成為CSS撵幽，將ES6、ES7轉(zhuǎn)換為瀏覽器兼容的ES5礁击，以及react中的JSX文件轉(zhuǎn)換為JS文件盐杂。
npm install --save-dev babel-loader
// webpack4.0需要安裝npm install --save-dev babel-loader@7
本文以webpack文章的demo為例，如果未閱讀上文哆窿，并且想了解完整過程請點擊回到上文
配置要在webpack.config.js文件中modules關(guān)鍵字下配置链烈。
配置項如下：
-
test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須） -
loader：loader的名稱（必須） -
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選） -
query：為loaders提供額外的設(shè)置選項（可選）
接下來我們在配置之前先要將我們的文件改動下，將app.js文件中的問候語單獨拎出來放到一個JSON文件中挚躯，然后通過配置來讀取這個JSON文件中的問候語强衡。
第一步 在app文件夾中創(chuàng)建一個JSON文件（此處創(chuàng)建一個文件名為config.json的JSON文件）
image.png
在
config.json文件中加入問候語：“Hello, welcome to loaders.”
[{
"text": "Hello, welcome to loaders."
}]
第二步 將app.js的文件中的問候語去掉并將config.json中的問候語導(dǎo)入。
var config = require('./config.json');
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = config[0].text;
return greet;
}
接下來我們運行下npm run server看看效果
image.png
注意：由于webpack3./webpack2.已經(jīng)內(nèi)置可處理JSON文件码荔，這里我們無需再添加webpack1.*需要的json-loader漩勤。
