webpack自定义loader解析指定后缀名文件

一个爬坑的Coder

已于 2023-09-13 17:24:02 修改

阅读量1.1k

点赞数

分类专栏：前端工程化文章标签： webpack javascript 前端

于 2023-09-13 17:22:54 首次发布

本文链接：https://blog.csdn.net/qq_39583550/article/details/127061434

版权

前端工程化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例： webpack自定义loader解析.chenjiang后缀名的文件

整体目录：
在这里插入图片描述

chenjiangLoader.js文件代码

// 正则匹配script标签中的内容
const REG = /<script>([\s\S]*)<\/script>/;

module.exports = function (source) {
	const __source = source.match(REG);

	return __source && __source[1] ? __source[1] : source;
};

test.chenjiang文件代码

<script>
    export default {
        name: 'chenjiang',
        age: 24
    }
</script>

配置webpack的loader

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.chenjiang$/,
        use: [path.resolve(__dirname, "loader/chenjiangLoader.js")],
      },
    ],
  },
};

主入口文件代码

import Utils from "./test.chenjiang";

console.log("自定义文件后缀名：", Utils.name);

运行命令

前提要npm install webpack webpack-cli -D

npx webpack

访问index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../dist/bundle.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>