(三)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。