在实现前先讲几个loader的关键知识点：
Loader的作用：
1.处理导入的非js文件将其转为js代码
2.对于test匹配到的文件类型的内容进行特定操作，比如今天要写的，对js文件的console进行清除
使用注意：
use中的loader执行顺序是倒序遍历执行的，所以在引入loader的时候需要注意执行的先后顺序
实现如下：
1.通过npm init -y 创建一个package.json文件
{
"name": "test-loader",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}
2.通过npm install webpack webpack-cli --save-dev 安装webpack资源包
3.创建一个webpack.config.js文件，进行打包配置
// webpack.config.js
const path = require('path');
const DelConsole = path.resolve(__dirname, "./loaders/delConsole.js") // 获取删除console文件路径
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.js/,
use: DelConsole
},
]
}
};
4.创建一个loaders文件夹，再创建一个delConsole.js文件
// delConsole.js
// 处理console.log的正则
const reg = /(console.log()(.*)())/g;
/**
* 清除console
* @param {String} source 文件内容
* @returns
*/
module.exports = function (source) {
// 通过正则表达式将内容中的console。log的正则替换为空
source = source.replace(reg, "")
// 将处理完的内容以进来时的格式进行返回，便于后面的loader对数据进行处理
return source
}
5.根据webpack.config.js中所编写的入口创建入口文件，先创建一个src文件夹，再创建一个index.js文件
console.log(123)
alert(1234)
6.通过上面package.json中设置的build，执行npm run build实现打包
7.创建一个index.html文件，将打包后的dist/main.js文件进行引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./dist/main.js"></script>
</head>
<body>
</body>
</html>
8.打开页面时可以看到alert(1234)被执行弹窗，console在控制台中没有被进行输出，也可以通过直接查看打包后的main.js文件中console是否被清除。
