Здравствуйте. Подскажите, пожалуйста, как правильно решить следующую задачу:
Пытаюсь в сборке webpack 4 подключить background-image, у меня выходит следующая ошибка:
Uncaught Error: Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './images/webpack.png' in 'D:\WebProjects\webpack-boilerplate\src\scss'
webpack-boilerplate/package.json
{
"name": "webpack-boilerplate",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack --watch"
},
"browserslist": [
"> 1%",
"last 3 version"
],
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.5",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"css-mqpacker": "^7.0.0",
"cssnano": "^4.1.8",
"file-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
}
}
webpack-boilerplate/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./dist/app.css">
<title>Document</title>
</head>
<body>
<div class="app">
<div class="app__picture">
<!--<img src="./dist/images/webpack.png" alt="">-->
</div>
<div id="react-root"></div>
</div>
<script src="./dist/app.js"></script>
</body>
</html>
webpack-boilerplate/webpack.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
app: './index.js'
},
mode: "development",
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'src/js/postcss.config.js'
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'src/js/postcss.config.js'
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
})
]
}
webpack-boilerplate/src/images/webpack.png
webpack-boilerplate/src/scss/main.scss
.app {
display: flex;
&__picture {
width: 200px;
height: 200px;
background-image: url('./images/webpack.png');
// background: #eee url('./images/webpack.png') 0 0 no-repeat;
}
}
Простой
