将react-svg-loader添加到Webpack [英] Adding react-svg-loader to webpack
问题描述
我想使用react-svg-loader导入并使用我的应用拥有的一些svg资产.您可以在下面找到我的webpack配置.但是,问题是我还在使用一些文件加载器来存储svg文件.这些是必需的,因为我的应用程序的某些部分正在从真棒字体(例如<i className="fa fa-lock" aria-hidden="true" />
.因此,我可以通过停止让文件加载器寻找svg文件来使react-svg-loader正常工作,但是我的应用程序上的许多图标都不会呈现.如果我不这样做,那么我的webpack将无法构建,并显示诸如以下内容:
I want to use react-svg-loader to import and use some svg assets I have for my app. You can find my webpack config below. The problem, however, is that I am also using some file loaders for svg files. These are needed because parts of my app are importing icons from font awesome, e.g. <i className="fa fa-lock" aria-hidden="true" />
. So I can get the react-svg-loader working by stop having my file loader look for svg files, but then a lot of the icons on my app won't render. If I don't do this then my webpack will fail to build, saying things like:
ERROR in ./node_modules/font-awesome/scss/font-awesome.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/react-svg-loader/lib/loader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.
那么我该如何解决这两个冲突?谢谢.
So how can I resolve these two conflicts? Thanks.
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
entry: [
"babel-polyfill",
`${SRC_DIR}/app/index.js`,
`${SRC_DIR}/app/assets/stylesheets/application.scss`,
`${SRC_DIR}/app/components/index.scss`,
"font-awesome/scss/font-awesome.scss",
"react-datepicker/dist/react-datepicker.css",
"rc-time-picker/assets/index.css",
"react-circular-progressbar/dist/styles.css",
"@trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
],
output: {
path: `${DIST_DIR}/app/`,
filename: "bundle.js",
publicPath: "/app/"
},
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: "babel-loader"
},
{
loader: "react-svg-loader",
options: {
jsx: true
}
}
]
},
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "application.css"
}),
]
};
module.exports = config;
推荐答案
在尝试使用react-svg-loader加载SVG,但使用file-loader加载Font Awesome SVG时,我遇到了类似的问题.这是我用来解决该问题的配置:
I had similar issues, while trying to load SVG's with react-svg-loader, but Font Awesome SVG's with file-loader. This was the config that I used to solve that problem:
{
test: /\.svg$/,
exclude: path.resolve(__dirname, 'node_modules', 'font-awesome'),
use: ['babel-loader', 'react-svg-loader'],
},
{
test: /\.svg$/,
include: path.resolve(__dirname, 'node_modules', 'font-awesome'),
use: [{
loader: 'file-loader',
options: {
jsx: true,
},
}],
},
如果您的webpack配置不在根目录中,请相应地更正排除/包含路径!
If your webpack config is not in the root, correct the exclude/include paths accordingly!
请注意,您的webpack配置中有多个SVG规则,请使用包含/排除规则使它们全部适用于您的情况.
Note that you have multiple rules for SVG's in your webpack config, play with include/excludes to make them all work for your case.
这篇关于将react-svg-loader添加到Webpack的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!