web-dev-qa-db-ja.com

Webpackを介してモジュールに画像をインポートする

アプリにNodeJ、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, {} );
}
javascriptnode.jsimageimportecmascript-6
5
Kayote

file-loader （または rl-loader 、 "は、ファイルが制限よりも小さい場合にデータURLを返すことができます "）を使用して、画像をモジュールにインポートできます。

このようなローダーの使用方法の詳細については、 webpackローダーのドキュメント を参照してください。

構成

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
14
klaasman

現在のバージョンのwebpackでは、次のように機能するはずです。

import t1 from "../../css/image/t1.png";

およびwebpack.config（webpack 2.0）：

module: {
  rules: [
    {test: /\.png$/, use: 'url-loader?mimetype=image/png'},
  ]
}
2
Marcus Tanner

これを行うには、webpack（v1）構成にローダーを追加します。

 {
    test: /\.png$/,
    loader: "url-loader?mimetype=image/png" 
 }

次にそれをインストールします：

npm install url-loader

最後に、次を使用して画像をインポートできるようになります。

import image from 'images/name.png'
1
jack.the.ripper