webpack自定义loader

loader介绍

在webpack中打包只能解析js文件，对于一些图片、css等资源需要借助loader来进行文件的转码，loader是对模块非js文件进行转换的插件，例如 webpack中css-loader、style-loader、baber-loader;

自定义loader

loader本质上是一个导出为函数的js模块，即函数

1. 使用webpack 解析 test.txt文件
2. 初始化基于webpack工程安装对应的webpack webpack-cli

• npm init 初始化项目
• 创建src/index.js 入口文件
• 创建public/index.html
• 创建webpack.config.js,填入配置
• npm i -D webpack webpack-cli
• 配置build 命令为 webpack
• 执行npm run build完成打包构建

3. webpack.config.js配置 const path = require(‘path’) module.exports = { mode: ‘development’, // 指定环境 entry: ‘./src/index.js’, // 入口文件 output: { // 输出文件 path: path.resolve(__dirname, ‘./dist’), filename: ‘bundle.js’ }, module: { rules: [ { test: /imooc$/, use: [path.resolve(__dirname, ‘./loader/test-loader.js’)] // 用来解析对应的loader文件 } ] } }
4. 解析test.txt test-loader.js文件 const REG = / ` const match = source.match(REG) console.log(match) console.log(’ ‘.match(/\s/)) } 最后执行npm run build 控制台解析了对应的文件