什么 webpack loader 可以解析 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

我认为这是因为我没有包含 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' }

    ]

  },

Answer 1

原来这与 svg 标签无关。我的 webpack.config 中缺少 js 文件的加载器。一个简单的解决方法是像这样添加一个 babel-loader：&nbsp;{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/,&nbsp; &nbsp; &nbsp; query: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; presets: ["@babel/env", "@babel/react"]&nbsp; &nbsp; &nbsp; }&nbsp;}