详解详解webpack自定义自定义loader初探初探
主要介绍了webpack自定义loader初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小
编过来看看吧
最近负责的Weex项目涉及到一些构建上的问题，需要通过自定义webpack的loader去实现，于是学习了一下这方面的知识，
写一篇文章做个总结，以免遗忘。
webpack想必前端圈的人都知道了，大多数人也都或多或少的用过。简单的说就是它能够加载资源文件，并对这些文件进行一
些处理，诸如编译、压缩等，最终一起打包到指定的文件中。可以说，它作为一个打包工具，在前端工程化浪潮中，起到了中
流砥柱的作用。
那webpack其中非常重要的一环就是，能够对加载的资源文件，进行一些处理。比如把less、sass文件编译成css文件，负责
这个处理过程的，就是webpack的loader。
什么是什么是loader
我们都知道webpack作为当下最火的一个前端构建工具，具有很多很实用的功能，loader就是其中之一。说的通俗一
点，loader就是用于对模块的源码进行转换。对于做Android的同学，大家可以把它想象成gradle中的transform task。
loader怎么用怎么用
在平时的开发过程中，loader的使用也是非常常见的，我们可以在工程的webpack.config.js中定义：
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
}
可以看到，对于css文件，我们使用css-loader，对于vue文件，我们使用vue-loader，对于图片文件，我们使用file-loader。这
些loader会将对应的文件进行转换，构建出最终的产物。
如何自定义如何自定义loader
有了上面的经验，我们该如何自定义一个loader呢？其实也是非常简单的。
首先我们创建一个js文件，就取名叫test-loader吧。
var loaderUtils = require('loader-utils');
module.exports = function(source) {
console.log("start process code...");
var options = loaderUtils.getOptions(this) || {};
if(options !== {}) {
var replaceMap = options["replaceMap"];
for(var key in replaceMap) {
console.log(source);
source = source.replace(key, replaceMap[key]);
console.log(source);
}
}
return source;
评论0
最新资源