webpack自定义loader

技术钱2025-03-17 14:26

loader介绍

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

自定义loader

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

使用webpack 解析 test.txt文件

javascript 复制代码

<script>
  export default {
    a: 1,
    b: 2
  }
</script>

初始化基于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完成打包构建

webpack.config.js配置

javascript 复制代码

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文件
            }
        ]
    }
}

解析test.txt test-loader.js文件

javascript 复制代码

const REG = /<script>([\s\S]+?)<\/script>/
module.exports = function(source) {
    console.log('== test-loader source', source)
    const __source = source.match(REG)
    console.log(__source)
    return __source && __source[1] ? __source[1] : source
}

// 判断当前模块是否为主模块，如果为主模块，则运行以下代码
// 用来对loader进行单独测试
if(require.main === module) {
    const source = `
      <script>
        export default {
            a: 1,
            b: 2
        }
        </script>
    `
    const match = source.match(REG)
    console.log(match)

    console.log(' '.match(/\s/))
}

最后执行npm run build

控制台解析了对应的文件