无法加载资源：net::ERR_FILE_NOT_FOUND iconfont.css

如何解决无法加载资源：net::ERR_FILE_NOT_FOUND iconfont.css

我跟着视频学习了如何在Webpack中打包其他资源，但是在使用Iconfont时出现了问题。我在教程中打包完成后，可以在浏览器中显示字体图标，但是我的代码在浏览器中报错

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpack</title>
    <link rel="stylesheet" href="./iconfont.css">
</head>
<body>
    <span class="iconfont icon-test"></span>
    <span class="iconfont icon-test1"></span>
    <span class="iconfont icon-test2"></span>
    <span class="iconfont icon-test3"></span>
    <span class="iconfont icon-test4"></span>
    <span class="iconfont icon-test5"></span>
    
</body>
</html>

我尝试在输出中添加“publicPath: './'”，但没有成功。起初我以为是“使用严格”模式的问题。我也试过把css文件的导入方式从import改成require，但是浏览器没有任何显示，所以还是报同样的错误。当我尝试将“AssetPublicPath：'/'”添加到“输出”时，VS Code 说错了，我放弃了。我真的找不到解决这个问题的方法。我希望有人能帮助我这个可怜的初学者

这是我的“webpack.config.js”文件的完整配置

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',output: {
    filename: 'bundle.js',path: resolve(__dirname,'dist'),publicPath:"./"
  },module: {
    rules: [
      {
        test: /\.css$/,use: ['style-loader','css-loader']
      },{
        exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {
          name: '[name].[hash:10].[ext]'
          // presets: [
          //   ['es2015',{modules: false}]
          // ]
        }
        // type: 'asset/resource',// generator: {
        //   filename: 'assets/[name].[hash:6].[ext]'
        // }
      }
    ]
  },plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',inject: 'head',scriptLoading: 'blocking'
    })
  ],mode: 'development'
};

无法加载资源：net::ERR_FILE_NOT_FOUND iconfont.css

如何解决无法加载资源：net::ERR_FILE_NOT_FOUND iconfont.css

相关推荐