文章目录

• 需求
• loader的相关知识
• loader的实现
• 测试

需求

webpack中使用react的时候，每个组件都要引入react，否则jsx解析会报错。真的烦。

故：
编写一个loader，处理所有jsx文件，在其开头添加以下代码：

import React from "react";

loader的相关知识

1，本质是一个函数。

参数能获取目标的内容，
结果能传递给下一个loader。

2，自定义loader要使用绝对路径引入。

loader的实现

三行代码解决需求。

module.exports = function (content, map, meta) {
	return 'import React from "react";' + content;
};

引入方式：

let jsxLoader = path.resolve("./jsx-loader.js");

{
	test: /\.jsx$/,
	exclude: /node_modules/,
	use: [babel, jsxLoader]
}

测试

一个用于测试的函数组件。

function HelloWorld(props) {
	return <h1>你好，世界！</h1>
}
export default HelloWorld;

效果。