案例： webpack自定義loader解析.chenjiang后綴名的文件
整體目錄：
文章來源：http://www.zghlxwxcb.cn/news/detail-733197.html
- chenjiangLoader.js文件代碼
// 正則匹配script標簽中的內(nèi)容
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文章來源地址http://www.zghlxwxcb.cn/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>
到了這里，關(guān)于webpack自定義loader解析指定后綴名文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
