Question

我正在使用webpack和svg-url-loader将SVG文件加载到我的反应应用中。但重要的是我想将这个ES5需求转换为ES6导入。这是要求：

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

我想出了这个导入声明：

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

但是，有没有更清洁的方法呢？

Answer 1

您应该使用默认的webpack require

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

或者您应该将svg-url-loader添加到您的webpack配置中;

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/

例如：webpack配置中的加载程序配置可能如下所示......

＆＃13;

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

＆＃13;

这样可以避免在每次需要或导入时指定加载程序。

如何转换es5需要es6导入

2 个答案: