Because the webpack at the time of extract in .scss files, it creates the file styles.css in the < strong> dist / css , but it removes the quotes and dots from the path of a photo for example: background: url("../img/back.jpg")
.
Leaving background: url(img/back.jpg)
, only so it is not possible to load the image in the browser.
Webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HWPConfig = new HtmlWebpackPlugin({
template: __dirname + "/src/index.html",
file: "index.html",
inject: "body"
});
module.exports = {
entry: ["./src/main.js"],
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: [["es2015", { modules: false }]]
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
})
},
{
test: /\.(png|jpg)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img/"
}
}
}
]
},
plugins: [HWPConfig, new ExtractTextPlugin("css/styles.css")]
};