[英]Import Images in Module Through 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 = {
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, {} );
}
文件加载器(或url-loader ,“如果文件小于限制,则可以返回数据 URL ”)可用于将图像导入模块。
有关如何使用此类加载器的更多信息,请参阅webpack 加载器文档:
配置
{ test: /\\.png$/, loader: "url-loader?mimetype=image/png" }
使用当前版本的 webpack,它应该可以工作:
import t1 from "../../css/image/t1.png";
和你的 webpack.config(webpack 2.0):
module: {
rules: [
{test: /\.png$/, use: 'url-loader?mimetype=image/png'},
]
}
你可以通过在你的 webpack (v1) 配置中添加一个加载器来实现:
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
然后安装它:
npm install url-loader
最后,您将能够使用以下方法导入图像:
import image from 'images/name.png'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.