:index.htmlabout.htmlcss*.cssbackground:url()
question: the above is the development file before I packaged. How can I set it in webpack (what loader is used and how to configure it) so that webpack can change the path of reference to. / images/*.png, when I see the html file in the package. / change the path of reference to.. / images/*.png when you see the css file?
personal attempt:
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
use: [
"url-loader?limit=10240&name=images/[name].[ext]"
]
}
the above method can only correctly load html image references (using html-withimg-loader)
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
use: [{
loader: "file-loader",
options: {
name: "[name].[ext]",
publicPath: "../images/",
outputPath: "images/"
}
}]
}
the above method can only correctly load css image references
I am a beginner of webpack, solution.
-
16:25:14 on June 29th, 2018
Supplementary Note:
I looked for it on the Internet just now. I can solve it correctly by using publicPath, but this path is written dead, so it"s not very good:
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
loader: "url-loader",
options: {
limit: 10240,
name: "images/[name].[hash:7].[ext]",
publicPath: "E:/MyWeb/jsliang-web/Webpack/webpack-6/dist"
}
},
I hope to have a better answer ~
