如何使用内联 带有webpack的React应用程序中的标签
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用内联 带有webpack的React应用程序中的标签相关的知识,希望对你有一定的参考价值。
我在使用webpack编译React应用程序时遇到错误:
You may need an appropriate loader to handle this file type. <svg
这起初似乎是一个容易解决的问题,但我的问题是我找不到与我的用例匹配的任何答案。我没有从svg
扩展名的文件中导入.svg
相反,我的svg
s在React组件中:
例:
import React from 'react';
import PropTypes from 'prop-types';
const SvgIcon = ({ icon: Icon, ...rest }) => (
<span>
<Icon { ...rest } />
</span>
);
图标:
import React from 'react';
const TickIcon = (props) => (
<svg { ...props }>
<path
d="M7.8,15.5c-0.3,0-0.7-0.1-0.9-0.3l-5-4.6c-0.5-0.5-0.5-1.2,0-1.7c0.5-0.5,1.3-0.5,1.8,0l4.1,3.8l8.5-7.8 c0.5-0.5,1.3-0.5,1.8,0c0.5,0.5,0.5,1.2,0,1.7l-9.4,8.6C8.5,15.4,8.2,15.5,7.8,15.5"
/>
</svg>
);
export default TickIcon;
像这样使用:
<SvgIcon icon={ TickIcon } />
我找不到任何方法来完成这项工作,我安装了大量不同的svg加载器,并在我的webpack配置中实现它们,但由于没有实际的svg
文件,它们都没有工作?
这是我的webpack.config
const webpack = require('webpack');
const path = require('path');
const htmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
template: './source/index.html',
filename: 'index.html',
});
const buildPlugin = new webpack.DefinePlugin({
BUILD_INFO: JSON.stringify('BUILD-000'),
});
module.exports = {
entry: './source/client.js',
output: {
path: path.resolve('build'),
filename: 'bundled.js',
publicPath: '/',
},
module: {
rules: [
{
test: /.js$|.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
resolve: {
alias: {
api: path.resolve(__dirname, './source/js/api'),
config: path.resolve(__dirname, './source/js/config'),
components: path.resolve(__dirname, './source/js/components'),
init: path.resolve(__dirname, './source/js/init'),
context: path.resolve(__dirname, './source/js/context'),
views: path.resolve(__dirname, './source/js/views'),
utilities: path.resolve(__dirname, './source/js/utilities'),
helpers: path.resolve(__dirname, './source/js/helpers'),
store: path.resolve(__dirname, './source/js/store'),
styles: path.resolve(__dirname, './source/styles'),
},
extensions: ['.js', '.jsx'],
},
plugins: [htmlPlugin, buildPlugin],
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
devServer: {
disableHostCheck: true,
historyApiFallback: true,
port: 80,
hot: false,
host: '0.0.0.0',
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: true,
},
},
};
谢谢
答案
您显示的代码不会导入ReactDOM
:
import ReactDOM from 'react-dom'
如果您使用的是JSX语法,那肯定是必需的。
此外,没有为babel-loader
说明的选项。您至少需要将@babel/preset-react
作为预设来编译它:
module: {
rules: [
{
test: /.js$|.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
}
@babel/preset-env
不是严格需要的,但会进行下编译,这样您就不必担心浏览器的兼容性。
以上是关于如何使用内联 带有webpack的React应用程序中的标签的主要内容,如果未能解决你的问题,请参考以下文章
如何在带有 webpack 的 React 应用程序中包含“leaflet.css”?
React:使用 Webpack 在 JSX 中内联 CSS 模块
如何使用带有羽毛/快递的 webpack-dev-middleware?