通过Webpack在模块中导入图像 [英] Import Images in Module Through Webpack
本文介绍了通过Webpack在模块中导入图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用NodeJs,webpack& ES2015适合我的应用。
我似乎无法弄清楚如何在我的模块中导入图像。
以下不起作用。
import../../css/image/t1.png ;
编辑:
根据Sitian的请求,这是我的webpack配置:
const webpack = require(webpack);
const path = require(path);
const merge = require(webpack-merge);
const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;
const PATHS = {
app:path.join(__ dirname,app),
build:path.join(__dirname,build)
} ;
const common = {
条目:{
app:PATHS.app
},
resolve:{//帮助我们引用.js?没有分机
扩展名:[,。js,。jsx]
},
输出:{
路径:PATHS.build,
文件名: bundle.js
},
模块:{
preLoaders:[
{
test:/\ css$/,
loaders:[ postcss],
包括:PATHS.app
},
{
test:/\。jsx?$ /,
loaders:[eslint ],
包括:PATHS.app
}
],
装载机:[
{
test:/\ css$ /,
loaders:[style,css],
包括:PATHS.app
},
{
test:/\。jsx?$ /,
loader:'babel',
查询:{
cacheDirectory:true,
presets:['react','e s2015']
},
包括:PATHS.app
}
]
}
};
if(TARGET ===start||!TARGET){
module.exports = merge(common,{
devtool:'inline-source-map',
devServer:{
contentBase:PATHS.build,
hot:true,
progress:true,
stats:'errors-only'
},
插件:[
new webpack.HotModuleReplacementPlugin()
]
});
}
if(TARGET ===build){
module.exports = merge(common,{});
}
解决方案
file-loader (或 url-loader ,如果文件小于限制可以返回数据URL,则可用于将图像导入模块。
有关如何使用的更多信息,请参阅 webpack Loaders文档这样的装载机:
配置
{test:/\.png $ /,loader:url-loader?mimetype = image / png}
I am using NodeJs, webpack & ES2015 for my app.
I cannot seem to figure out how to import an image/s in my modules. The following does not work.
import "../../css/image/t1.png";
EDIT: As per Sitian's request, here is my webpack config:
const webpack = require( "webpack" );
const path = require( "path" );
const merge = require( "webpack-merge" );
const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;
const PATHS = {
app : path.join( __dirname, "app" ),
build : path.join( __dirname, "build" )
};
const common = {
entry : {
app : PATHS.app
},
resolve : { // helps us refer to .js? without ext.
extensions : [ "", ".js", ".jsx" ]
},
output : {
path : PATHS.build,
filename : "bundle.js"
},
module : {
preLoaders : [
{
test : /\.css$/,
loaders : [ "postcss" ],
include : PATHS.app
},
{
test : /\.jsx?$/,
loaders : [ "eslint" ],
include : PATHS.app
}
],
loaders : [
{
test : /\.css$/,
loaders : [ "style", "css" ],
include : PATHS.app
},
{
test : /\.jsx?$/,
loader : 'babel',
query : {
cacheDirectory : true,
presets : [ 'react', 'es2015' ]
},
include : PATHS.app
}
]
}
};
if( TARGET === "start" || !TARGET ) {
module.exports = merge( common, {
devtool : 'inline-source-map',
devServer : {
contentBase : PATHS.build,
hot : true,
progress : true,
stats : 'errors-only'
},
plugins : [
new webpack.HotModuleReplacementPlugin()
]
} );
}
if( TARGET === "build" ) {
module.exports = merge( common, {} );
}
解决方案
The file-loader (or url-loader, which "can return a Data Url if the file is smaller than a limit") can be used to import images into modules.
See the webpack loaders documentation for more information on how to use such loaders:
Configuration
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
这篇关于通过Webpack在模块中导入图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文