변환하는 방법 es5 필요는 es6 가져 오기

Question

나는 반응 애플 리케이션에 SVG 파일을로드하는 webpack과 을 사용하고 있습니다. 그러나 중요한 부분은이 ES5 요구 사항을 ES6 가져 오기로 변환하고 싶다는 것입니다.

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

을하고 나는이 import 문을 함께했다 : 여기가 요구됩니다

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

그러나이 작업을 수행 할 수있는 청소기 방법이 아니다?

Answer 1

는

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

또는 당신이 당신의 웹팩 설정에 SVG-URL-로더를 추가해야합니다으로 필요;

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

지금 당신은 당신이 청소기 무엇을 의미합니까

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

Answer 2

Webpack loader가 아마도 원하는 것일 것입니다. 별칭이 없으면 도움이 될 수도 있습니다.

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

예를 들어

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

: 당신의 웹팩 설정에서 로더 설정은 다음과 같이 보일 수 있습니다 ...

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'] 
 
     } 
 
     } 
 
    ]

이 지정하는 것을 피한다 당신의 로더가 필요하거나 가져올 때마다. 당신은 기본 웹팩을 사용한다