2017-04-25 11 views
0

私はwebpacksvg-url-loader私の反応のアプリケーションにSVGファイルを読み込むために使用しています。しかし、重要な点は、このES5要件をES6インポートに変換したいということです。どのようにes5を必要とするes6をインポートするには

require('!!svg-url-loader?noquotes!../images/mustachio.svg') 

と私は、このimport文を思い付いた:ここでは必要である

import mustachio from '!!svg-url-loader?noquotes!../images/mustachio.svg' 

しかし、そこにこれを行うためのクリーンな方法ではないでしょうか?

+2

を使用することができますか? 'import abc from" xyz "'よりもクリーナーのインポートはありません。モジュールストリングのフォーマットは、es6インポートではなく、モジュールローダーによって決まります。 –

+0

'mustachio'はどこから来たのですか? ES5に必要な変数はありません。 – Bergi

+0

それはちょうどそれがいかに働くかである。とにかく、私はそれを理解した。 – Hum4n01d

答えて

3

require('!!svg-url-loader?noquotes!../images/mustachio.svg')

か、あなたのWebPACKの設定にSVG-URL-ローダーを追加する必要がありますと必要です。

module.exports = { 
 
    module: { 
 
     rules: [{ 
 
      test: /\.svg/, 
 
      use: { loader: 'svg-url-loader', options: {noquotes: true}} 
 
     }] 
 
    } 
 
}

、今あなたがきれいで何を意味しています

import mustachio from './../images/mustachio.svg';

+0

ありがとう!以前はそれが好きでしたが、 'noquotes'オプションを使用していなかったので動作しませんでした。私の質問を削除する必要がありますか? – Hum4n01d

0

Webpackローダーはおそらくあなたが望むものです。エイリアスがない場合も役立ちます。例えば

https://webpack.js.org/loaders/

https://webpack.js.org/configuration/resolve/

:あなたのWebPACKの設定でローダーの設定は次のように見えるかもしれません...

loaders: [ 
 
     { test: /\.css$/, loader: 'style-loader!css-loader'}, 
 
     { test: /\.less$/, loader: 'style-loader!css!less' }, 
 
     { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=css/[name].[ext]' }, 
 
     { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=css/[name].[ext]' }, 
 
     { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=css/[name].[ext]' }, 
 
     { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=css/[name].[ext]' }, 
 
     { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=css/[name].[ext]' }, 
 
     { 
 
     test: /.jsx?$/, 
 
     loader: 'babel-loader', 
 
     exclude: /node_modules/, 
 
     query: 
 
     { 
 
      presets: ['es2015', 'react', 'stage-0'], 
 
      plugins: ['transform-runtime', 'transform-decorators-legacy'] 
 
     } 
 
     } 
 
    ]

これは、あなたを指定する必要がなくなります各要求またはインポート時のローダー。あなたはデフォルトのWebPACKを使用する必要があります

関連する問題