webpack 生成图片路径问题

Karon_
  • 1.1k

在使用webpack构建工具中遇到了 图片问题 下面是我的目录:

clipboard.png

webpack.config.js的内容:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: "./js/components/header/header.js",
    output: {
        path: __dirname+'/js/components/header/',
        filename: "h.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.png$/, loader: "file-loader" }
        ]
    }
};

header.js的内容:

require('../../../css/basic.css');
require('./css/header.css');

我想问的是,webpack打包生成的图片在header.js所在的目录下,引用图片的路径也是当前目录下:

clipboard.png

webpack打包的样式是内嵌在html上的,但我的html在最外层目录,就相当于让它在html目录下找图片,但是图片不在根目录而在header.js所在的目录下啊,所以引用不到。。蛋碎一地
我想问下的是:webpack有没有修改这个图片的路径???
或者有没有类似的参考资料?我研究研究


问题解决:
在loaders中配置:

{ test: /\.png$/, loader: "file-loader?name=img/[hash:8].[name].[ext]" }

就会在 img 文件夹中生成对应的图片,done ~ (@_@;)

回复
阅读 24.9k
5 个回答
✓ 已被采纳

孩纸,让老夫来告诉你,你缺了这个配置:ouput.publicPath,

看文档:output-publicpath

useRelativePath

  {
    loader: 'file-loader',
    options: {
      outputPath: 'img/',
      name: '[name].[ext]?[hash]',
      useRelativePath:true
    }
  }

写绝对路径 ? ( / )

{

            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader?limit=8192&name=[name].[ext]&outputPath=img/&publicPath=../'
        }
        

参数说明:
limit: 在文件小于多少个字节时,将文件编码并返回DataURL。
name: 表示输出的文件名规则,如果不添加这个参数,输出的就是默认值:文件哈希。
outputPath: 表示输出文件路径前缀(此例中意为:在输出文件夹下新建(如果没有)一个名为img的文件夹,把图片放到里面)。
publicPath: 表示打包文件中图片路径的前缀,如果你的图片存放在CDN上,那么你上线时可以加上这个参数,值为CDN地址,这样就可以让项目上线后的资源引用路径指向CDN了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏