javascript - webpack打包的时候img标签中的src找不到?

 藏A组合别_577 发布于 2022-11-15 23:16

我写的路径应该没问题的:

运行后报错:

webpack配置:

let webpack = require('webpack'),
  path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true',
  utils = require('./utils')

var env = process.env.NODE_ENV,
  cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap),
  cssSourceMapProd = (env === 'production' && config.build.productionSourceMap),
  useCssSourceMap = cssSourceMapDev || cssSourceMapProd;

module.exports = {
  devtool: 'eval-source-map', //配置生成Source Maps,选择合适的选项

  entry: {
    desktop: [path.resolve(__dirname, '../src/main.js'), hotMiddlewareScript],
  },
  output: {
    path: path.resolve(__dirname, '../dist'), //打包后的文件存放的地方
    publicPath: '/',
    filename: '[name].js'
  },

  resolve: {
    extensions: ['', '.js'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'scss': path.resolve(__dirname, '../src/scss')
    }
  },

  module: { //在配置文件里添加JSON loader
    loaders: [{
      test: /\.json$/,
      loader: "json"
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css!postcss' //添加对样式表的处理
    }, {
      test: /\.scss$/,
      loader: 'style!css!sass?sourceMap'
    }, {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url?limit=10000&name=images/[name].[ext]'
    }, {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url?limit=10000&name=images/[name].[ext]'
    }]
  },

  sassLoader: {
    includePaths: [path.resolve(__dirname, "./some-folder")]
  },
  
  postcss: [
    require('autoprefixer') //调用autoprefixer插件
  ],

  plugins: [
    new webpack.BannerPlugin("Copyright B1anker."), //在这个数组中new一个就可以了
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      //渲染输出html文件名,路径相对于 output.path 的值
      filename: './index.html',
      //渲染源模版文件
      template: path.resolve(__dirname, '../src/views/index.html'),
      //这个东西非常重要,true: 自动写入依赖文件; false: 不写入依赖,构建多页面非常有用
      inject: true
    })
  ],

  devServer: {
    contentBase: "./dist", //本地服务器所加载的页面所在的目录
    colors: true, //终端中输出结果为彩色
    historyApiFallback: true, //不跳转
    inline: true //实时刷新
  }
}

如何处理呢?

2 个回答
  • 从运行后报错的情况来看, 你应该正在用webpack-dev-server进行开发调试, 这个时候webpack.config.jsdevServer.contentBase指定了web服务器的根目录. 该配置现在为/<project>/dist/, 而图片的请求地址为/assets/logo.png, 这个时候图片对应的本地文件系统路径应该为/<project>/dist/assets/logo.png.

    你可以把assets/复制到dist/目录下, 这样应该就能解决问题了.

    2022-11-15 23:58 回答
  • html-withimg-loader

     new HtmlWebpackPlugin({
            template: 'html-withimg-loader!' + path.resolve(srcDir, filename),
            filename: filename
        }),

    https://github.com/wzsxyz/htm...

    2022-11-15 23:58 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有