如果有人可以在为产品进行编译时解决图像路径问题,请在此处共享我的webpack配置。
开发人员模式下的路径(一切正常):
`.background { background-image: url(/assets/img/image.jpg);}`
处于生产模式的路径(不起作用,需要在资产前面插入点!):
`.background { background-image: url(/assets/img/image.jpg);}`
这是整个Webpack配置设置
// webpack v4
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: { main: "./views/index.js" },
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[hash].js"
},
devServer: {
contentBase: "./dist",
port: 7700
},
module: {
rules: [
{
test: /.pug$/,
use: [
{
loader: 'pug-loader'
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
'postcss-loader',
'sass-loader',
]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
"file-loader",
{
loader: 'image-webpack-loader?name=/img/[name].[ext]',
options: {
bypassOnDebug: true
}
}
]
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader'
},
{
test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/"
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin("dist", {}),
new CopyWebpackPlugin([ { from: './assets/img', to: './assets/img' } ]),
new MiniCssExtractPlugin({
filename: "style.[contenthash].css"
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: "./views/index.pug",
filename: "index.html",
favicon: "./favicon.ico"
}),
new WebpackMd5Hash()
]
};
预先感谢您提供任何线索,以了解发生这种情况的原因以及如何解决该问题。
格拉西亚斯! 米凯尔