@GaserV

Почему webpack не рендерит имэджи?

Всем привет! Собрал (взял бойлерплейт подходящий и доинсталил что мне нужно) проект на реакт + вебпак. И вроде бы все ок, но почему-то иконки он не хочет рендерить. В данном случае svg. В css прописывается урл в base64. Полагаю это вызвано url-loader?

webpack.config:
"use strict";
var webpack = require("webpack");
var path = require("path");
var loaders = require("./webpack.loaders");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var DashboardPlugin = require("webpack-dashboard/plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

loaders.push(
	{
		test: /\.scss|sass$/,
		loaders: ["style-loader", "css-loader?importLoaders=1", "sass-loader"],
		exclude: ["node_modules"]
	},
	{
		test: /\.(png|woff|woff2|eot|ttf|svg|otf)$/,
		loader: "url-loader?limit=100000"
	}
);

module.exports = {
	entry: [
		"react-hot-loader/patch",
		"./src/index.js" // your app's entry point
	],
	devtool: process.env.WEBPACK_DEVTOOL || "eval-source-map",
	output: {
		publicPath: "/",
		path: path.join(__dirname, "public"),
		filename: "bundle.js"
	},
	resolve: {
		extensions: [".js", ".jsx"]
	},
	module: {
		loaders
	},
	devServer: {
		contentBase: "./public",
		// do not print bundle build stats
		noInfo: true,
		// enable HMR
		hot: true,
		// embed the webpack-dev-server runtime into the bundle
		inline: true,
		// serve index.html in place of 404 responses to allow HTML5 history
		historyApiFallback: true,
		port: PORT,
		host: HOST
	},
	plugins: [
		new webpack.NoEmitOnErrorsPlugin(),
		new webpack.NamedModulesPlugin(),
		new webpack.HotModuleReplacementPlugin(),
		new ExtractTextPlugin({
			filename: "style.css",
			allChunks: true
		}),
		new DashboardPlugin(),
		new HtmlWebpackPlugin({
			template: "./src/template.html",
			files: {
				css: ["style.css"],
				js: ["bundle.js"]
			}
		})
	]
};
  • Вопрос задан
  • 663 просмотра
Решения вопроса 1
Torin_Asakura
@Torin_Asakura
Lead Architect
Потому что гладиолус)
{
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2|gif)$/,
            use: [
                'file-loader?name=[hash:12].[ext]&outputPath=images/',
                'image-webpack-loader',
            ],
        },
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы