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>
相关推荐
東雪蓮☆22 分钟前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵23 分钟前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号28 分钟前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超34 分钟前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc1 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君1 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy1 小时前
不定高虚拟列表
前端
前端AK君1 小时前
React组件库如何在vue项目中使用
前端
Moonbit1 小时前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud1 小时前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构