Как правильно грузить статические файлы (картинки, доки) в React/Webpack?

Question

[Nikita Shchypylov]

Всем привет
Не могу загрузить картинку в проект, отдаёт то "not found", то "unknown character"
webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const BUILD_DIR = path.resolve(__dirname, "./dist");

module.exports = {
	context: path.join(__dirname, "/"),
	entry: ["babel-polyfill", "./src/index.js"],
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js"
	},
	devServer: {
		contentBase: "./dist",
		// outputPath: BUILD_DIR,
		// hot: true,
		historyApiFallback: true
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader"
				}
			},
			{
				test: /\.scss$/,
				use: [
					{
						loader: "style-loader"
					},
					{
						loader: "css-loader"
					},
					{
						loader: "sass-loader"
					}
				]
			},
			{
				test: /\.css/,
				use: ["style-loader", "css-loader"]
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: "html-loader"
					}
				]
			},
			{ test: /\.(jpe?g|gif|jpg|png|svg|woff|ttf|wav|mp3)$/, loader: "file", include: '/*/**' }
		]
	},
	plugins: [
		new HtmlWebPackPlugin({
			template: "./public/index.html",
			filename: "./index.html"
		}),
		new CopyWebpackPlugin([{ from: "./public/img/*", to: "./img" }], {})
	]
};

Попытки :
1) Тут отдало unknown charaсter, якобы нужен лоадер, хотя он у меня есть
const noImage = require('./img/no_image.jpeg');

2)
Тоже самое
<img src='./img/no_image.jpeg' alt=""/>

Как решить данную проблему?

Answer 1

[Максим]

Для первого варианта: попробуйте file-loader (а не просто file).

Для второго варианта: картинку надо брать из public директории.

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/' // название директории
  },

<img src='./static/popup-illustration.png' />

Во втором случае картинка не попадет в webpack, а будет отдана как есть.

Comments

[Nikita Shchypylov]

Спасибо, первое помогло
Второе нет :)
Работает только так :

context: path.join(__dirname, "/"),
	entry: ["babel-polyfill", "./src/index.js"],
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js"
		// publicPath: "./public/" // название директории
	},
	devServer: {
		contentBase: "./public",
		// outputPath: BUILD_DIR,
		// hot: true,
		historyApiFallback: true
	},

Но тогда хреново собирает проект