cgreact-loader/template/image-module.js

CGReact与Webpack配套的loader

/** file-loader导出是这样的：
 	module.exports = __webpack_public_path__ + "pages/zx-page/add.jpg";
 	为了兼容esModule模式，cgreact-loader会替换为：
 	const cg_exports = __webpack_public_path__ + "pages/zx-page/add.jpg";
	我们拼接我们注入的代码片段如下，达到偷梁换柱的目的
 */
const ImagePath = cg_exports;
let result = class extends require("react").Component
{
	render()
	{
		return require("react").createElement("img", {
			src: ImagePath
		});
	}
};
// 让导入Image可以直接作为src的字符串
result.path = ImagePath;
export const path = ImagePath;

// 当<img>标签的src是一个object的时候，调用其valueOf方法获取字符串进行加载
export function valueOf()
{
	return ImagePath
}

/**导出符合esnext标准的模块
 * 这种导出的方式require会得到一个esModule，其中default就是导出的result
 * 而import 则会直接得到其中的default，因为Image我们希望require的方式可以直接得到路径
 * 因此用这种导出方式
 */
export default result;