Webpack 4 图片与JS文件路径配置问题求助

我来帮你搞定这个Webpack 4的配置问题！从你描述的情况和给出的部分配置来看，主要是output配置和图片资源处理规则没设置到位，下面是修正后的完整配置，同时我会给你拆解关键配置点：

完整修正配置 #

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.resolve(__dirname, "public"), // 输出根目录
    filename: 'js/[name].bundle.js' // 将JS文件输出到public/js文件夹下
  },
  module: {
    rules: [
      // 处理图片资源，保留源路径和文件名
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[path][name].[ext]', // 输出到public/images，并保留源文件的相对路径和名称
              context: path.resolve(__dirname, 'src'), // 以src为路径基准，避免输出路径带src前缀
              publicPath: '/' // 确保HTML中引用图片的路径正确
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html', // 你的HTML模板路径
      filename: 'index.html' // 输出到public根目录的HTML文件
    })
  ]
};

关键配置说明 #

• JS文件输出到/js文件夹：在output.filename中指定js/[name].bundle.js，[name]会对应你入口文件的名称（这里是index），最终打包后的JS会生成在public/js/index.bundle.js。
• 图片输出到images文件夹并保留源路径：
  • 使用file-loader处理图片资源（需要先安装：npm install file-loader --save-dev）
  • options.name设置为images/[path][name].[ext]，其中[path]会保留图片相对于context的路径，[name].[ext]保留原文件名和后缀
  • context设为src的绝对路径，这样图片的输出路径会去掉src前缀，比如src/assets/img/logo.png会输出到public/images/assets/img/logo.png
• HtmlWebPackPlugin配置：指定模板文件和输出文件名，确保打包后的HTML能自动引用正确路径的JS和图片资源。

额外注意事项 #

1. 确保你已经安装了所需依赖：

npm install html-webpack-plugin file-loader --save-dev

2. 如果你的图片较小，想转成base64嵌入代码，可以改用url-loader，配置和file-loader类似，只需添加limit参数（比如limit: 8192表示8KB以下的图片转base64）。

内容的提问来源于stack exchange，提问作者stargatesg1