webpack5 打包生成多余图片 export default __webpack_public_path__的解决方案

➜   ✗ webpack --version
webpack: 5.63.0
webpack-cli: 4.9.1
webpack-dev-server not installed

问题描述：在webpack.config.js中添加file-loader的操作，​​npm run build​​后生成的图片多余

{
        test: /\.(jpe?g|png|gif|svg)$/,
        use: {
          loader: "file-loader"
        }
      },

解决方案一

css-loader改为下面配置

{
        test: /\.less$/,
        use: [
          "style-loader",
          // "css-loader",
          {
            loader: "css-loader",
            options: {
              esModule: false, //解决生成多余文件问题
              importLoaders: 1
            }
          },
          
          "less-loader"
        ]
      },

解决方案二

使用asset module type

在webpack5之前，加载资源需要使用一些loader，比如raw-loader 、url-loader、file-loader；
在webpack5开始，可直接使用资源模块类型（asset module type），来替代这些loader；