编写一个webpack loader
作用
loader是一种打包的方案,webpack默认只识别js结尾的文件,当遇到其他格式的文件后,webpack并不知道如何去处理。此时,我们可以定义一种规则,告诉webpack当他遇到某种格式的文件后,去求助于相应的loader。
开发
新建loaders文件夹并创建三个loaders文件
// remove-comment-loader.js 去除注释
module.exports = function(source) {
const reg = new RegExp(/(\/\/.*)|(\/\*[\s\S]*?\*\/)/g)
return source.replace(reg, '')
}
// reverse-loader.js // 反转字符串
module.exports = function (src) {
if (src) {
console.log('--- reverse-loader input:', src)
src = src.split('').reverse().join('')
console.log('--- reverse-loader output:', src)
}
return src;
}
// uppercase-loader // 首字母大写
module.exports = function (src) {
console.log(src, 33333)
if (src) {
console.log('--- uppercase-loader input:', src)
src = src.charAt(0).toUpperCase() + src.slice(1)
console.log('--- uppercase-loader output:', src)
}
return src
}
入口文件
// index.js
import myTxt from './index.txt'
const add = function (a, b) {
return a + b
}
/**
* 注释
*/
(function () {
// 注释
console.log(myTxt);
console.log(add(1, 2));
})
// index.txt
asdasdadsasdasdsasdasdas
打包文件
// webpack.config.js
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
loader: 'remove-comment-loader'
},
{
test: /\.txt$/,
use: [
'uppercase-loader',
'reverse-loader'
]
}
]
},
output: {
path: path.resolve(__dirname, 'dist')
},
resolveLoader: {
modules: ['node_modules', './loaders/']
}
}
打包后的效果
注释被删除了,txt文件字符也反转和首字母大写了
const add = function (a, b) {
return a + b
}
(function () {
console.log(_index_txt__WEBPACK_IMPORTED_MODULE_0___default.a, 99888);
console.log(add(1, 2));
})
/***/ }),
/* 1 */
/***/ (function(module, exports) {
Adsadsasdsadsasdadsadsa
/***/ })
实际开发中我们会有各种各样的定制话的loader需要去使用,针对每种情况去开发对应的loader是加快我们开发效率的一种方式