javascript - masalah sumber fail pakej webpack

Question

Menggunakan alat pembungkusan webpack, saya mendapati masalah selepas membungkus fail sumber imej.
Dalam bungkusan fail bundle.js

Imej saya merujuk kepada laluan relatif. html entri dan fail sumber projek dalam talian saya adalah berasingan. Adakah terdapat sebarang cara untuk menukar kedudukan relatif imej yang dirujuk kepada kedudukan mutlak yang saya tetapkan semasa pembungkusan dalam persekitaran pengeluaran?

Melihat penyelesaian orang lain, ada yang berkata untuk mengubah suai output dalam webpack.config.js.

Saya menetapkan lokasi untuk publicPath, tetapi saya menyemak lokasi rujukan imej dalam bundle.js, dan ia masih relatif. . . . . Selesaikan

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']
                    })
                ]
            }
        }
    })
  ],
};

Answer 1

Jangan bungkus css ke dalam bundle.js Ekstraknya ke dalam fail css secara berasingan dan cuba lihat laluan di dalamnya Kemudian saya akan melihat bahawa publicPath dalam pek web yang anda siarkan masih /. Keputusan ujian tempatan saya adalah seperti berikut.