如何使用相对路径使用webpack为我的网站加载图像？

我正在尝试组合一个网站进行部署，并且有一些困难，因此我可以从项目目录中相对于.scss文件以及相对于项目中的各种.js文件中提取图像。我不擅长webpack，我遵循了一个样板设置来使其工作，但没有真正学到它。为了让图像起作用，我必须将它们从计算机上的位置完全拉出。当我尝试正确部署它时，这不起作用？如何使用相对路径使用webpack为我的网站加载图像？

我需要在我的scss文件（url（''））中实现一个背景图像，以及反应组件中名为Portfolio-Piece的许多图像。

我确实安装了resolve-url-loader和sass-loader。这是我的WebPack配置...如果有人能ELI5使用的WebPack时，什么是根

var webpack = require('webpack'); 
var path = require('path'); 


var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { test: /\.scss$/, loaders: ["style", "css", "sass", 'resolve-url','sass?sourceMap']}, 
     { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader!resolve-url' }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
     { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
     { test: /\.(jpg|png)$/, loader: "file-loader?name=[path][name].[ext]" } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
    ] 
}; 

module.exports = config;

奖励积分？相对路径从哪里来？ index.js？ index.html的？

来源

2016-05-09 MindfulBell

首先，resolve-url-loader必须位于配置中的sass-loader之前。你有sass loader两次：sass和sass?sourceMap。我会努力改变你的第一个装载于以下内容：（删除第一SASS）

{ test: /\.scss$/, loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']},

在我的项目，我喜欢添加背景图片样式，内嵌式上我的反应成分和使用require声明。这里有一个例子：

var PortfolioPiece = React.createClass({ 
    render: function() { 
    return (
     <div 
     className="wrapper" 
     style={{ backgroundImage: `url(${require('./my-img.png')})` }} 
     > 
    ); 
    } 
});

的require('./my-img.png')的通话将被解析到的网址，让这一形象的生活。

便笺：在代码中混合使用双撇号和单撇号。你应该坚持一个或另一个。

来源

2016-05-09 21:28:32 mgmcdermott

如何使用相对路径使用webpack为我的网站加载图像？

回答

相关问题