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