Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
14
rated 0 times [  19] [ 5]  / answers: 1 / hits: 28407  / 8 Years ago, thu, may 12, 2016, 12:00:00

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, {} );
}

More From » node.js

 Answers
45

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 }


[#62200] Tuesday, May 10, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
adam

Total Points: 363
Total Questions: 102
Total Answers: 104

Location: Burkina Faso
Member since Thu, Dec 15, 2022
1 Year ago
;