(三)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文件)
在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
看看效果
注意:由于webpack3./webpack2.已经内置可处理JSON文件,这里我们无需再添加webpack1.*需要的json-loader。
标签:文件,JSON,Loaders,json,问候语,loaders,config 来源: https://www.cnblogs.com/onesea/p/13539297.html