(三)Loaders

loaders中文翻译是装载机，从字面意思看它是用来安装某些东西的，它可以调用框架以外的脚本和工具来处理各种格式的文件，比如将Scss、Less分析转换成为CSS，将ES6、ES7转换为浏览器兼容的ES5，以及react中的JSX文件转换为JS文件。

npm install --save-dev babel-loader
// webpack4.0需要安装npm install --save-dev babel-loader@7

本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击​​回到上文​​​配置要在​​webpack.config.js​​文件中​​modules​​关键字下配置。
配置项如下：

• ​​test​​：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
• ​​loader​​：loader的名称（必须）
• ​​include/exclude​​:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
• ​​query​​​：为loaders提供额外的设置选项（可选）
  接下来我们在配置之前先要将我们的文件改动下，将​​​app.js​​文件中的问候语单独拎出来放到一个JSON文件中，然后通过配置来读取这个JSON文件中的问候语。

第一步 在app文件夹中创建一个JSON文件（此处创建一个文件名为​​config.json​​的JSON文件）

image.png

在​​config.json​​文件中加入问候语：“Hello, welcome to loaders.”

[{
    "text": "Hello, welcome to loaders."
}]

第二步 将​​app.js​​​的文件中的问候语去掉并将​​config.json​​中的问候语导入。

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.已经内置可处理JSON文件，这里我们无需再添加webpack1.*需要的json-loader。