案例： webpack自定义loader解析.chenjiang后缀名的文件
整体目录：
文章来源：https://www.toymoban.com/news/detail-733197.html
- 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文章来源地址https://www.toymoban.com/news/detail-733197.html
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>
到了这里，关于webpack自定义loader解析指定后缀名文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
