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>
相关推荐
小磊哥er10 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗
前端
江城开朗的豌豆10 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen021118 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->6 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端7 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app