亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

什么 webpack loader 可以解析 html 文件中的 <svg> 元素

什么 webpack loader 可以解析 html 文件中的 <svg> 元素

慕田峪9158850 2022-01-07 10:32:09
我正在嘗試使用 webpack 構建的源代碼中有這種元素:<svg      version="1"      xmlns="http://www.w3.org/2000/svg"      width={size}      height={size}      viewBox={setView(options)}      id={id}    >      {element}</svg>但是,當我嘗試構建我的應用程序時,我收到了這種錯誤: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我認為這是因為我沒有包含 svg 標簽的 html 文件的加載器。我嘗試安裝 svg-loader 但它似乎只關心以 .svg 結尾的文件。為了使用我的 webpack.config.js 構建項目,我需要安裝什么模塊?我正在使用 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' }    ]  },
查看完整描述

1 回答

?
至尊寶的傳說

TA貢獻1789條經驗 獲得超10個贊

原來這與 svg 標簽無關。我的 webpack.config 中缺少 js 文件的加載器。一個簡單的解決方法是像這樣添加一個 babel-loader:


 { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/,

      query: {

          presets: ["@babel/env", "@babel/react"]

      } 

}


查看完整回答
反對 回復 2022-01-07
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號