Как правильно подключить background-image в webpack?
Здравствуйте. Подскажите, пожалуйста, как правильно решить следующую задачу:
Пытаюсь в сборке 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 { |
Часовой пояс GMT +3, время: 23:35. |