什么 webpack 加载器可以解析 html 个文件中的 <svg> 个元素

Question

我尝试用 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:4
Module 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

我想这是因为我没有 html 包含 svg 标签的文件的加载器。我尝试安装 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' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      showErrors: true,
      title: 'React-TS-Webpack App',
      path: path.join(__dirname, '../dist/'),
      hash: true
    })
  ]

}

Answer 1

事实证明这与 svg 标签无关。我的 webpack.config 中缺少 js 文件的加载程序。一个简单的解决方法是像这样添加一个 babel-loader：

 { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/,
      query: {
          presets: ["@babel/env", "@babel/react"]
      } 
}

什么 webpack 加载器可以解析 html 个文件中的 <svg> 个元素

What webpack loader can parse <svg> elements inside html files

javascript

reactjs

webpack-4