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

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

整体目录:

  • chenjiangLoader.js文件代码
javascript 复制代码
// 正则匹配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文件代码
javascript 复制代码
<script>
    export default {
        name: 'chenjiang',
        age: 24
    }
</script>
  • 配置webpack的loader
javascript 复制代码
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")],
      },
    ],
  },
};
  • 主入口文件代码
javascript 复制代码
import Utils from "./test.chenjiang";

console.log("自定义文件后缀名:", Utils.name);
  • 运行命令

前提要npm install webpack webpack-cli -D

shell 复制代码
npx webpack
  • 访问index.html文件
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>
相关推荐
mCell20 小时前
GSAP 入门指南
前端·javascript·动效
gnip21 小时前
组件循环引用依赖问题处理
前端·javascript
Aotman_1 天前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_6141 天前
Web前端面试题(1)
前端·面试·职场和发展
EveryPossible1 天前
选择数据展示
javascript
lypzcgf1 天前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育1 天前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9491 天前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld1 天前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu1 天前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能