我正在嘗試使用 webpack 構(gòu)建的源代碼中有這種元素:<svg version="1" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox={setView(options)} id={id} > {element}</svg>但是,當(dāng)我嘗試構(gòu)建我的應(yīng)用程序時(shí),我收到了這種錯(cuò)誤:ERROR in ./src/lib/components/element.js 33:4Module parse failed: Unexpected token (33:4)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders| | return (> <svg| version="1"| xmlns="http://www.w3.org/2000/svg" @ ./src/lib/index.js 1:0-49 3:15-25 @ ./src/components/Results.tsx @ ./src/components/PageContainer.tsx @ ./src/App.tsx @ ./src/index.tsx我認(rèn)為這是因?yàn)槲覜]有包含 svg 標(biāo)簽的 html 文件的加載器。我嘗試安裝 svg-loader 但它似乎只關(guān)心以 .svg 結(jié)尾的文件。為了使用我的 webpack.config.js 構(gòu)建項(xiàng)目,我需要安裝什么模塊?我正在使用 webpack 版本 4.41.2這是我的 webpack.config.js:const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: { main: './src/index.tsx' }, output: { path: path.join(__dirname, '../dist/'), filename: '[name].bundle.js', }, watch: true, resolve: { extensions: ['.ts', '.tsx', '.js'] }, devServer: { contentBase: path.join(__dirname, '../dist/'), port: 2222 }, devtool: 'inline-source-map', module: { rules: [ { test: /.tsx?$/, use: ['awesome-typescript-loader'] }, { test: /.html$/, use: 'raw-loader' }, { test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader'] }, { test: /\.woff(\?.+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.woff2(\?.+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.ttf(\?.+)?$/, use: 'file-loader' }, { test: /\.eot(\?.+)?$/, use: 'file-loader' }, { test: /\.svg(\?.+)?$/, use: 'svg-inline-loader' }, { test: /\.png$/, use: 'url-loader?mimetype=image/png' }, { test: /\.gif$/, use: 'url-loader?mimetype=image/gif' } ] },
什么 webpack loader 可以解析 html 文件中的 <svg> 元素
慕田峪9158850
2022-01-07 10:32:09