Using the webpack packaging tool, a problem was discovered after packaging the image resource files.
In the packaging file bundle.js

My pictures refer to relative paths. The entry html and resource files of my online project are separate. Is there any way to directly change the relative position of the referenced image to the absolute position I set when packaging in the production environment?

After looking at other people's plans, some said to modify the output in webpack.config.js.

I set the location for publicPath, but I checked the reference location of the image in bundle.js, and it was still relative. . . . . Solve

const { resolve } = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var OpenBrowserPlugin = require('open-browser-webpack-plugin'); module.exports = { entry: [ './index.js' ], output: { filename: 'bundle.js', path: resolve(__dirname, 'dist'), publicPath: '/' }, context: resolve(__dirname, 'src'), module: { rules: [ { test: /\.js$/, use: [ 'babel-loader', ], exclude: /node_modules/ }, { test:/\.(png|gif|jpg|jpeg|bmp)$/i, use:[ 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',//限制大小8kb "file-loader?name=images/[hash:8].[name].[ext]" ], }, { test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, use:[ 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',//限制大小小于8kb "file-loader?name=images/[hash:8].[name].[ext]" ], }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', ], }, { test: /\.scss$/, include:resolve(__dirname, 'src'), loaders: [ 'style-loader', 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[hash:base64:8]', 'postcss-loader', ] }, ], }, plugins: [ // webpack 内置的 banner-plugin new webpack.BannerPlugin("Copyright by 309187341@qq.com"), // html 模板插件 new HtmlWebpackPlugin({ template: __dirname + '/index.html' }), new webpack.LoaderOptionsPlugin({ options: { postcss: function(){ return [ require("autoprefixer")({ //通过这个插件，能够将CSS3的后缀自动添加上。 browsers: ['ie>=8','>1% in CN'] }) ] } } }) ], };