[英]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.